Search notes:
HTML element canvas: code snippets
First (simplest) example
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas: simple first example</title>
<script>
window.onload = function () {
var canvas = document.getElementById('ctx');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,100,20)";
ctx.fillRect (10, 10, 280, 280);
}
}
</script>
<style>
#ctx {
border:1px solid #000000;
}
</style>
</head>
<body>
<canvas id="ctx" width="300" height="300">
Your browser doesn't support canvas!
</canvas>
</body>
</html>
Drawing lines
<!DOCTYPE html>
<html>
<head><title>Draw line</title>
<script type="text/javascript">
function init() { try {
var canvas = document.getElementById('canvas');
var context_2d = canvas.getContext('2d');
context_2d.beginPath();
context_2d.lineWidth = '10';
context_2d.strokeStyle = '#0000ff';
context_2d.moveTo(20 , 20);
context_2d.lineTo(860,560);
context_2d.stroke();
context_2d.beginPath();
context_2d.lineCap = 'round';
context_2d.lineWidth = '10';
context_2d.strokeStyle = '#ff9900';
context_2d.moveTo(20 ,560);
context_2d.lineTo(860, 20);
context_2d.stroke();
} catch(e) {alert (e)} }
</script>
</head>
<body onload='init();'>
<canvas id ='canvas'
width='900' height='600'
style ='width:900px;height:600px;border:solid 1px black;margin-left:-450px;margin-top:-300px;left:50%;position:fixed;top:50%' ></canvas>
</body>
</html>
Drawing rectangles
<!DOCTYPE html>
<html>
<head><title>Draw line</title>
<script type="text/javascript">
function init() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#f70';
ctx.beginPath();
ctx.rect( 50, 50, 200, 20);
ctx.stroke();
ctx.strokeStyle = '#70f';
ctx.beginPath();
ctx.rect( 250, 90, -200, 20); // Note the negative width !
ctx.stroke();
ctx.strokeStyle = '#0f7';
ctx.beginPath();
ctx.rect( 250, 150, -200, -20); // Note the negative height !
ctx.stroke();
}
</script>
</head>
<body onload='init();'>
<canvas id ='canvas'
width='900' height='600'
style ='width:900px;height:600px;border:solid 1px black;margin-left:-450px;margin-top:-300px;left:50%;position:fixed;top:50%' ></canvas>
</body>
</html>
Events
<!DOCTYPE html>
<html>
<head><title>Canvas Events</title></head>
<script type="text/javascript">
function init() { try {
var canvas = document.getElementById('canvas');
canvas.onmouseup = function(e) { alert ('mouse up @ ' + e.pageX + '/' + e.pageY)}
canvas.onmousedown = function(e) { alert ('mouse down @ ' + e.pageX + '/' + e.pageY)}
canvas.onmousemove = function(e) { alert ('mouse move @ ' + e.pageX + '/' + e.pageY)}
} catch(e) {alert (e)} }
</script>
<body onload='init();'>
<canvas id ='canvas'
style ='width:900px;height:600px;border:solid 1px black;margin-left:-450px;margin-top:-300px;left:50%;position:fixed;top:50%' >
</body>
</html>
quadraticCurveTo
<!DOCTYPE html>
<html>
<head><title>Draw line</title>
<script type="text/javascript">
function init() {
var canvas = document.getElementById('canvas');
var context_2d = canvas.getContext('2d');
context_2d.lineCap='round';
context_2d.beginPath();
context_2d.lineWidth = '10';
context_2d.strokeStyle = '#22bbff';
context_2d.moveTo(50, 50);
context_2d.quadraticCurveTo(450,550, 850,50);
context_2d.stroke();
}
</script>
</head>
<body onload='init();'>
<canvas id ='canvas'
width='900' height='600'
style ='border:solid 1px black;margin-left:-450px;margin-top:-300px;left:50%;position:fixed;top:50%' ></canvas>
</body>
</html>
requestAnimationFrame
<!DOCTYPE html>
<html>
<head><title>Animated Canvas [requestAnimFrame]</title>
<script type="text/javascript">
function init() {
window.requestAnimFrame = (
function(callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60); };
}
)();
var initTime = (new Date()).getTime();
var radius_path = 200;
var radius_circle = 30;
var x0 = 300;
var y0 = x0;
function animate() {
var time = new Date().getTime();
var timeDiff = time - initTime;
var secondsSinceStart = timeDiff / 1000;
var x = x0 + radius_path * Math.sin(2*Math.PI * secondsSinceStart / 10);
var y = y0 + radius_path * Math.cos(2*Math.PI * secondsSinceStart / 10);
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.strokeStyle='#223311';
context.fillStyle ='#ff9966';
context.arc(x, y, radius_circle, 0, 2*Math.PI);
context.closePath();
context.fill();
context.stroke();
requestAnimFrame(function() {
animate();
});
}
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
animate();
}
</script>
</head>
<body onload='init();' style='text-align:center'>
<canvas id ='canvas'
width='600' height='600'
style ='width:600px;height:600px;border:solid 1px black;margin-left:-300x' ></canvas>
</body>
</html>