Tutorial by Examples

This example shows a simple image cropping function that takes an image and cropping coordinates and returns the cropped image. function cropImage(image, croppingCoords) { var cc = croppingCoords; var workCan = document.createElement("canvas"); // create a canvas workCan.wi...

When adding content from sources outside your domain, or from the local file system the canvas is marked as tainted. Attempt to access the pixel data, or convert to a dataURL will throw a security error. vr image = new Image(); image.src = "file://myLocalImage.png"; image.onload = funct...

Make sure your image object is fully loaded before you try to draw it on the canvas with context.drawImage. Otherwise the image will silently fail to display. In JavaScript, images are not loaded immediately. Instead, images are loaded asynchronously and during the time they take to load JavaScript...

Scaling to fit Means that the whole image will be visible but there may be some empty space on the sides or top and bottom if the image is not the same aspect as the canvas. The example shows the image scaled to fit. The blue on the sides is due to the fact that the image is not the same aspect as ...