Canvas Smily face Playground

by Michał Belka

HTML

<canvas id="canvas" width="300" height="300"></canvas>

CSS

canvas {
    border: 1px red solid;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
	
ctx.strokeRect(30, 30, 200, 200);
ctx.beginPath();
ctx.arc(130, 130, 70, 0, Math.PI*2, true);
ctx.moveTo(170, 140);
ctx.arc(130, 140, 40, 0, Math.PI, false);
ctx.moveTo(95, 100);
ctx.arc(105, 100, 10, 0, Math.PI, false);
ctx.moveTo(165, 100);
ctx.arc(155, 100, 10, 0, Math.PI*2, true);
ctx.stroke();