function draw1() { var canvas = document.getElementById('example1'); if (!canvas.getContext) return; var context = canvas.getContext('2d'); // draw some rectangles - filled, outline and erase // coordinates are relative to the top LH corner context.fillStyle = "rgb(2550,0,0)"; context.fillRect (20,20,150,150); context.strokeRect (80,80,60,60); context.clearRect (50,50,70,70); // draw a filled triangle // open a path and draw the shap using lines // when it is complete, fill the shape with colour context.fillStyle = "rgb(150,0,150)"; context.beginPath(); context.moveTo(150,100); context.lineTo(300,220); context.lineTo(150,220); context.fill(); // draw an arc // parameters are location, radius, starting and ending angles and direction of drawing context.fillStyle = "orange"; context.beginPath(); context.arc(420,120,50,(Math.PI/180)*0,(Math.PI/180)*180,false); context.fill(); // draw some text // parameters are text and x,y location context.font = "24px arial"; context.fillStyle = "black"; context.fillText('Here is some text', 320,220); // draw some pictures from a GIF file // the approach used here is one way to ensure that the image is loaded before it is used // the second function call has extra arguments which define scaling values var pic1 = new Image(); pic1.onload=function() { context.drawImage(pic1,220,10); context.drawImage(pic1,360,10,80,80); } pic1.src = "plotting/pic1.gif"; }

[close window]