JSFiddle - React, Tailwind, and code Playground

Drawing an Image to the Canvas - circle

by bitstarr

HTML

<canvas id="c" width="200" height="158"></canvas>

CSS

body {
    background: #CEF;
}

JavaScript

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');



// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {

    // Save the state, so we can undo the clipping
    ctx.save();
    
    
    // Create a circle
    ctx.beginPath();
    ctx.arc(106, 77, 74, 0, Math.PI * 2, false);
    
    // Clip to the current path
    ctx.clip();
    
    
    ctx.drawImage(img, 0, 0);
    
    // Undo the clipping
    ctx.restore();
}

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";