Draw cross using Canvas

by pronebird

HTML

<canvas id="canvas" width="300" height="300"></canvas>

CSS

body { background: #fac; }

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var radius = 60;
var thickness = radius * 0.3;
var lineOffset = radius * 0.4;
context.translate(200, 200);

context.save();

context.setFillColor('#663399');
context.beginPath();
context.arc(0, 0, radius, 0, Math.PI * 2, true);
context.closePath();
context.fill();

context.globalCompositeOperation = 'destination-out';
context.beginPath();
context.rotate(Math.PI/4);
context.rect(-radius + lineOffset, thickness * -0.5, radius * 2 - lineOffset * 2, thickness);
context.rotate(Math.PI / 2);
context.rect(-radius + lineOffset, thickness * -0.5, radius * 2 - lineOffset * 2, thickness);
context.closePath();
context.fill();

context.restore();