HTML and CSS Reference
In-Depth Information
/* draw circle for head */
context.beginPath();
context.fillStyle = "yellow";
context.arc(150,150,100,0,Math.PI*2,true);
context.fill();
/* draw the eyes, nose and mouth */
context.beginPath();
context.moveTo(80,110);
context.bezierCurveTo(95,85,115,85,130,110);
context.moveTo(170,110);
context.bezierCurveTo(185,85,205,85,220,110);
context.moveTo(155,130);
context.quadraticCurveTo(130,145,155,155);
context.moveTo(100,175);
context.quadraticCurveTo(150,250,200,175);
context.moveTo(50,20);
context.stroke();
}
</script>
</head>
<body>
<h1> Smile you're on canvas </h1>
<canvas id="canvas" width="300" height="300">
<strong> Canvas Supporting Browser Required </strong>
</canvas>
</body>
</html>
O NLINE http://htmlref.com/ch2/canvasface.html
Scaling, Rotating, and Translating Drawings
You now have looked at the basic shapes and styling, but there is much more that you can
do to customize a drawing through transformations. The canvas API provides a number of
useful methods that accomplish the common tasks you will likely want to perform. First
let's explore the scale( x , y ) function, which can be used to scale objects. The x parameter
shows how much to scale in the horizontal direction and the y parameter indicates how
much to scale vertically.
/* scale tall and thin */
context.scale(.5,1.5);
writeBoxes(context);
/* move short and wide */
context.scale(1.75,.2);
writeBoxes(context);
Search WWH ::




Custom Search