HTML5 Canvas Tutorial - HTML5 Canvas Image
To draw an image using HTML5 Canvas,
we can use the drawImage() method.
The drawImage() method requires an image object and a destination point.
We must first create an image and
wait for it to load before instantiating drawImage().
We can accomplish this by using the onload property of the image object.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
<!--from www. j a v a2s . co m-->
imageObj.onload = function() {
context.drawImage(imageObj, 70, 50);
};
imageObj.src = 'http://www.java2s.com/style/demo/border.png';
</script>
</body>
</html>
The code above is rendered as follows:
Image Size
To set the size of an image using HTML5 Canvas,
we can add two additional arguments to the
drawImage() method, width and height.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 190;
var y = 30;
var width = 200;
var height = 150;
var imageObj = new Image();
<!-- w w w . j av a 2 s. c om-->
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://www.java2s.com/style/demo/border.png';
</script>
</body>
</html>
The code above is rendered as follows:
Image Crop
To crop an image using HTML5 Canvas,
we can add six additional arguments to the drawImage() method,
sourceX, sourceY, sourceWidth,
sourceHeight, destWidth and destHeight.
These arguments define the location and size of a rectangle that we want to cut out of an image.
Image reference: http://www.w3.org/TR/2dcontext/
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
<!-- w w w .j ava2s. co m-->
imageObj.onload = function() {
// draw cropped image
var sourceX = 10;
var sourceY = 10;
var sourceWidth = 50;
var sourceHeight = 50;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var destY = canvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};
imageObj.src = 'http://www.java2s.com/style/demo/border.png';
</script>
</body>
</html>
The code above is rendered as follows:
Load Multiple Images
To load multiple images for drawing on HTML5 Canvas, we can use an image loader function.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
<!-- w w w .j av a2 s . c om-->
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var sources = {
img1: 'http://www.java2s.com/style/demo/border.png',
img2: 'http://www.java2s.com/style/demo/border.png'
};
loadImages(sources, function(images) {
context.drawImage(images.img1, 100, 30, 200, 150);
context.drawImage(images.img2, 350, 50, 100, 100);
});
</script>
</body>
</html>
The code above is rendered as follows: