HTML5 Canvas - Fill Circle with Image

HTML5 Canvas - Fill circle with image

I did this the other day for a big thing I'm making;

var thumbImg = document.createElement('img');

thumbImg.src = 'path_to_image';
thumbImg.onload = function() {
    tmpCtx.save();
    tmpCtx.beginPath();
    tmpCtx.arc(25, 25, 25, 0, Math.PI * 2, true);
    tmpCtx.closePath();
    tmpCtx.clip();

    tmpCtx.drawImage(thumbImg, 0, 0, 50, 50);

    tmpCtx.beginPath();
    tmpCtx.arc(0, 0, 25, 0, Math.PI * 2, true);
    tmpCtx.clip();
    tmpCtx.closePath();
    tmpCtx.restore();
};

Worked perfect for me.

Here's a more complex version of it that I made which does image caching too, https://jsfiddle.net/jaredwilli/ex5n5/

How do I create a canvas circle with a image on it?

If supportable by your use case, I suggest using a png with pre-cropped circular transparency to improve performance and avoid having to code this.

But let's carry on and answer your question from the comment. I felt this was different enough from Canvas clip image with two quadraticCurves to add a new answer, but that thread shows the general approach: use context.clip() after a path with a context.arc, then finish with context.drawImage.

Since you're drawing other things as well, wrap your clip with context.save() and context.restore() to prevent your clip from affecting everything you draw afterwards.

Here's a minimal example:

const canvas = document.createElement("canvas");
canvas.height = canvas.width = 100;
const {width: w, height: h} = canvas;
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
const img = new Image();
img.onload = function () {
  ctx.fillRect(10, 0, 20, 20); // normal drawing before save()  
  ctx.save();
  ctx.beginPath();
  ctx.arc(w / 2, h / 2, w / 2, 0, Math.PI * 2);
  ctx.clip();
  ctx.drawImage(this, 0, 0);
  ctx.restore();
  ctx.fillRect(0, 10, 20, 20); // back to normal drawing after restore()
};
img.src = `http://placekitten.com/${w}/${h}`;

HTML5 canvas fill image with a circle

I figured it out using context save, clip, and restore. new jsfiddle

ctx.save();        
ctx.clip();
loadnewimage();
ctx.restore();

html5 canvas, image as background for arch or circle

You can use for example clip() to do this by first defining the clip path using arc(), call clip(), then draw in the two images in each half.

A simple example:

var img1 = new Image, img2 = new Image, count = 0, ctx = c.getContext("2d");img1.onload = img2.onload = go;img1.src = "//i.stack.imgur.com/EU6KB.jpg";img2.src = "//i.stack.imgur.com/UmEA9.jpg";
function go() {  if (++count < 2) return;  // just to make sure both images has loaded    // save state as restoring is the only way to remove a clip-mask  ctx.save();    // define clip-mask using path operations  ctx.arc(75, 75, 75, 0, 6.28);  ctx.clip();    // draw in top image  ctx.drawImage(img1, 0, 0);
  // draw in bottom image  ctx.drawImage(img2, 0, 75);    // remove clip mask  ctx.restore();}

<canvas id=c></canvas>

Drawing a circle / arc on top of an image in HTML Canvas

The issue is caused as loading an image is asynchronous, then once loaded and drawn it overlaps what's already drawn.

A solution is to move the code which is drawing the sun into the onload callback.

img.onload = function() {
  // draw image
  context.drawImage(img, 0, 29)

  // draw sun
  context.beginPath();
  context.arc(800, -29, 87, 0, 2 * Math.PI);
  context.closePath();
  context.fillStyle = '#FEDB62';
  context.fill();
}

How to draw only a circular part of an image with HTML 5 canvas?

The way to achieve this is to use clip to define a clipping region:

var ctx;
var canvas;

var img = new Image();

img.onload = function() {

    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(100, 100, 60, 0, 6.28, false); //draw the circle
    ctx.clip(); //call the clip method so the next render is clipped in last path
    ctx.stroke();
    ctx.closePath();
    ctx.drawImage(img, -190, 0);
};

img.src = "http://www.antiquiet.com/wp-content/uploads/2011/03/Free-Trapper_Remasters_The-Kills-467x311.jpg";

You can see a working fiddle here: http://jsfiddle.net/hJS5B/47/

Code reused from my answer to this question: Draw multiple circles filled with image content

---

Related Topics