public
Created

  • Download Gist
basic-canvas.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>basic canvas</title>
 
<style media="screen">
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
 
canvas {
border: 1px solid #CCC;
}
</style>
<script>
function init() {
var canvas = document.getElementsByTagName('canvas')[0];
if (canvas.getContext) {
var
ctx = canvas.getContext("2d"),
w = canvas.width, // canvas width
h = canvas.height // canvas height
;
// begin canvas code
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 50, 50);
 
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.beginPath();
ctx.arc (70, 70, 40, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();
}
}
window.addEventListener('load', init, false);
</script>
 
</head>
<body>
 
<h1>basic canvas</h1>
<canvas width="150" height="150"></canvas>
 
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.