Skip to content

Instantly share code, notes, and snippets.

@nilskoppelmann

nilskoppelmann/canvas.html

Created October 27, 2013 23:13
Show Gist options
  • Save nilskoppelmann/7189065 to your computer and use it in GitHub Desktop.
Save nilskoppelmann/7189065 to your computer and use it in GitHub Desktop.
Download ZIP
Fiddling around with HTML5 Canvas.
Raw
canvas.html
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas { border: 1px solid gray; }
</style>
<script>
function draw() {
var canvas = document.getElementById('house');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50,125);
ctx.lineTo(50,75);
ctx.lineTo(100,75);
ctx.lineTo(75,25);
ctx.lineTo(50,75);
ctx.lineTo(100,125);
ctx.lineTo(100,75);
ctx.lineTo(50,125);
ctx.lineTo(100,125);
ctx.stroke();
} else {}
var ctx = document.getElementById('rects').getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45,45,60,60);
ctx.strokeStyle = "rgba(255,120,0,1)";
ctx.strokeRect(50,50,50,50);
var ctx = document.getElementById('arc').getContext('2d');
for(var i=0;i<4;i++){
for(var j=0;j<3;j++){
ctx.beginPath();
var x = 25+j*50; // x coordinate
var y = 25+i*50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
if (i>1){
ctx.fill();
} else {
ctx.stroke();
}
}
}
var ctx = document.getElementById('arcs').getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,(Math.PI/180)*30,(Math.PI/180)*210, true);
ctx.fillStyle = "rgba(255,255,0,1)";
ctx.fill();
ctx.beginPath();
ctx.arc(75,75,50,(Math.PI/180)*-30,(Math.PI/180)*150);
ctx.fill();
ctx.beginPath();
ctx.arc(70,49.5,6,0,Math.PI*2,true);
ctx.fillStyle = "rgb(0,0,0)";
ctx.fill();
ctx.beginPath();
ctx.arc(69,50,1,0,Math.PI*2,true);
ctx.fillStyle = "rgb(255,255,255)";
ctx.fill();
var ctx = document.getElementById('beziers').getContext('2d');
ctx.fillRect(0,0,150,90);
ctx.beginPath();
ctx.moveTo(0,90);
ctx.quadraticCurveTo(75,50,150,90);
ctx.lineTo(151,151);
ctx.lineTo(-1,151);
ctx.lineTo(-1,90);
ctx.closePath();
ctx.fillStyle = "rgba(75,75,75,1)";
ctx.fill();
ctx.beginPath();
ctx.moveTo(0,150);
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.quadraticCurveTo(40,50,75,150);
ctx.quadraticCurveTo(110,50,150,150);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.arc(37.5*1,140,5,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(37.5*3,140,5,0,Math.PI*2,true);
ctx.fill();
}
</script>
</head>
<body onload="draw();">
<canvas id="rects" width="150" height="150"></canvas>
<canvas id="house" width="150" height="150"></canvas>
<canvas id="arc" width="150" height="150"></canvas>
<canvas id="arcs" width="150" height="150"></canvas>
<canvas id="beziers" width="150" height="150"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment