Skip to content

Instantly share code, notes, and snippets.

@cyberfox

cyberfox/canvas_test.html

Created May 4, 2011 00:11
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cyberfox/954503 to your computer and use it in GitHub Desktop.
Save cyberfox/954503 to your computer and use it in GitHub Desktop.
Download ZIP
A simple <canvas> element test
Raw
canvas_test.html
<!DOCTYPE html>
<html>
<head>
<title>Testing HTML5 Canvas element</title>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
This is a test of the HTML5 Canvas element.
<canvas id="drawing_canvas" width="800" height="600" style="position: absolute; top: 0; left: 0;">
</canvas>
<script type="text/javascript">
canvas = document.getElementById('drawing_canvas');
var ctx = canvas.getContext('2d');
var lastX = null;
var lastY = null;
$("#drawing_canvas").mousemove(function(event) {
if(lastX != null) {
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 2.5;
ctx.strokeStyle = 'rgba(0, 0, 0, 1.0)';
ctx.stroke();
}
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(event.pageX, event.pageY);
console.log("draws: lineTo(" + event.pageX + ", " + event.pageY + ")");
lastX = event.pageX;
lastY = event.pageY;
ctx.globalCompositeOperation = 'source-over';
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(200, 0, 0, 1.0)';
ctx.stroke();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment