This recipe is an implementation of multiple functions demonstrated so far. The output looks like this:
The recipe is as follows.
The HTML code:
<html> <head> <title>Mouse</title> <script src="mouse.js"></script> </head> <body onload="init()"> <canvas id="MyCanvasArea" width="300" height="300" style="border:2px solid blue;" > your browser does not support canvas </canvas> <h1>A Mouse</h1> </body> </html>
function init() { var can=document.getElementById("MyCanvasArea"); var ctx=can.getContext("2d"); drawCircle(ctx,110,60,20,6,"black","grey"); drawCircle(ctx,110,60,10,3,"pink","pink"); drawCircle(ctx,190,60,20,6,"black","grey"); drawCircle(ctx,190,60,10,3,"pink","pink"); drawTriangle(ctx,150,202.4,100,50,"black"); ctx.save(); ctx.translate(can.width/2,can.height/2); ctx.scale(1,2); ctx.save(); ctx.restore(); drawCircle(ctx...