Let's jump right in by drawing a simple image. In this recipe, you'll learn how to load an image and draw it on the canvas. Also, you will learn to crop an image:
Follow these steps to draw an image on the canvas.
The HTML code to complete this recipe is as follows:
<html> <head> <title>Image</title> <script src="ImageDrawing.js"></script> </head> <body onload="init();"> <center> <canvas id="MyCanvasArea" width="900" height="420" style="border:2px solid blue;" >your browser does not support canvas</canvas> <h1>An Image</h1> </center> </body> </html>
The JavaScript code:
var can;
var ctx;
var boyimage;
function init()
{
can = document.getElementById('MyCanvasArea'),
ctx = can.getContext('2d');
draw();
function draw()
{
boyimage = new Image();
boyimage.src = 'Images/ohams.png';
boyimage.onload = function(){
ctx.drawImage(boyimage...