Drawing images on the server in php w3schools

❮ HTML Canvas Reference

Image to use:

Example

Draw the image onto the canvas:

Your browser does not support the HTML5 canvas tag.

JavaScript:

window.onload = function[] {
  var c = document.getElementById["myCanvas"];
  var ctx = c.getContext["2d"];
  var img = document.getElementById["scream"];
  ctx.drawImage[img, 10, 10];
};

Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method

drawImage[]	Yes	9.0	Yes	Yes	Yes

Definition and Usage

The drawImage[] method draws an image, canvas, or video onto the canvas.

The drawImage[] method can also draw parts of an image, and/or increase/reduce the image size.

Note: You cannot call the drawImage[] method before the image has loaded. To ensure that the image has been loaded, you can call drawImage[] from window.onload[] or from document.getElementById["imageID"].onload.

JavaScript Syntax

Position the image on the canvas:

JavaScript syntax:

context.drawImage[img,x,y];

Position the image on the canvas, and specify width and height of the image:

JavaScript syntax:

context.drawImage[img,x,y,width,height];

Clip the image and position the clipped part on the canvas:

JavaScript syntax:

context.drawImage[img,sx,sy,swidth,sheight,x,y,width,height];

Parameter Values

ParameterDescriptionPlay it

img	Specifies the image, canvas, or video element to use
sx	Optional. The x coordinate where to start clipping	Play it »
sy	Optional. The y coordinate where to start clipping	Play it »
swidth	Optional. The width of the clipped image	Play it »
sheight	Optional. The height of the clipped image	Play it »
x	The x coordinate where to place the image on the canvas	Play it »
y	The y coordinate where to place the image on the canvas	Play it »
width	Optional. The width of the image to use [stretch or reduce the image]	Play it »
height	Optional. The height of the image to use [stretch or reduce the image]	Play it »

More Examples

Example

Position the image on the canvas, and specify width and height of the image:

Your browser does not support the HTML5 canvas tag.

JavaScript:

window.onload = function[] {
  var c = document.getElementById["myCanvas"];
  var ctx = c.getContext["2d"];
  var img = document.getElementById["scream"];
  ctx.drawImage[img, 10, 10, 150, 180];
};

Try it Yourself »

Example

Clip the image and position the clipped part on the canvas:

Your browser does not support the HTML5 canvas tag.

JavaScript:

window.onload = function[] {
  var c = document.getElementById["myCanvas"];
  var ctx = c.getContext["2d"];
  var img = document.getElementById["scream"];
  ctx.drawImage[img, 90, 130, 50, 60, 10, 10, 50, 60];
};

Try it Yourself »

Example

Video to use [press Play to start the demonstration]:

Canvas:

Your browser does not support the HTML5 canvas tag.

JavaScript [the code draws the current frame of the video every 20 milliseconds]:

var v = document.getElementById["video1"];
var c = document.getElementById["myCanvas"];
var ctx = c.getContext['2d'];
var i;

v.addEventListener['play',function[] {i=window.setInterval[function[] {ctx.drawImage[v,5,5,260,125]},20];},false];
v.addEventListener['pause',function[] {window.clearInterval[i];},false];
v.addEventListener['ended',function[] {clearInterval[i];},false];

Try it Yourself »

❮ HTML Canvas Reference

Draw on the Canvas With JavaScript

All drawing on the HTML canvas must be done with JavaScript:

Example

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];
ctx.fillStyle = "#FF0000";
ctx.fillRect[0, 0, 150, 75];

Try it Yourself »

Step 1: Find the Canvas Element

First of all, you must find the element.

This is done by using the HTML DOM method getElementById[]:

var canvas = document.getElementById["myCanvas"];

Step 2: Create a Drawing Object

Secondly, you need a drawing object for the canvas.

The getContext[] is a built-in HTML object, with properties and methods for drawing:

var ctx = canvas.getContext["2d"];

Step 3: Draw on the Canvas

Finally, you can draw on the canvas.

Set the fill style of the drawing object to the color red:

ctx.fillStyle = "#FF0000";

The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is black.

The fillRect[x,y,width,height] method draws a rectangle, filled with the fill style, on the canvas:

ctx.fillRect[0, 0, 150, 75];