canvas example

messing with canvas

by dorien

HTML

<canvas id="canvas" width="320" height="320">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

CSS

canvas {
  border: 1px dotted black;
}

JavaScript

var radius = 10;

//background
cx1 = document.getElementById("canvas").getContext('2d');

img = new Image();
img.src = 'http://dorienherremans.com/Interface.png';
cx1.drawImage(img, 0, 0);


//keep this ball visible
cx3 = document.getElementById("canvas").getContext('2d');
cx3.beginPath();
cx3.arc(20, 20, 10, 0, Math.PI * 2, true);
cx3.closePath();
cx3.fillStyle = '#6465ED';
cx3.fill();
cx3.lineWidth = 2;
cx3.strokeStyle = '#003300';
cx3.stroke();

//this first ball should be removed by the next command
cx2 = document.getElementById("canvas").getContext('2d');
cx2.beginPath();
cx2.arc(150, 150, 10, 0, Math.PI * 2, true);
cx2.closePath();
cx2.fillStyle = '#6495ED';
cx2.fill();
cx2.lineWidth = 2;
cx2.strokeStyle = '#003300';
cx2.stroke();

//somehow reset cx2 while still keeping the background
//ctx2.fillColor = "rgba(0-255, 0-255, 0-255, 0-1)"   
//cx2.clearRect(0,0,300,300);
//cx2.globalCompositeOperation = "destination-out"
//cx2.fillStyle = 'rgba(0, 255, 0, 0)';
// cx2.fillRect(0, 0, 300, 300);
// cx2.globalCompositeOperation = "destination-in"

cx2.beginPath();
cx2.arc(250, 250, 10, 0, Math.PI * 2, true);
cx2.closePath();
cx2.fillStyle = '#6495ED';
cx2.fill();
cx2.lineWidth = 2;
cx2.strokeStyle = '#003300';
cx2.stroke();