$(document).ready(function(){ var ctx = $("#canvas").get(0).getContext("2d"); ctx.fillStyle = "rgb(10,10,10)"; ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.fillStyle = "yellow"; ctx.fill(); ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); });
<div id="wrap"> <canvas id="canvas" width="300" height="150"> <p>Ha ha! you looser! your poor browser doesn't support HTML5 xD</p> </canvas> </div> <p id="info"></p>
#canvas { border: 5px solid #D6D6D6; cursor: pointer; }