Drawing images on the server in php w3schools
❮ HTML Canvas Reference Show Image to use:ExampleDraw the image onto the canvas: Your browser does not support the HTML5 canvas tag.JavaScript: window.onload = function()
{ Try it Yourself » Browser SupportThe numbers in the table specify the first browser version that fully supports the method.
Definition and UsageThe 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 SyntaxPosition the image on the canvas:
Position the image on the canvas, and specify width and height of the image:
Clip the image and position the clipped part on the canvas:
Parameter Values
More ExamplesExamplePosition 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() { Try it Yourself » ExampleClip the image and position the clipped part on the canvas: Your browser does not support the HTML5 canvas tag.JavaScript: window.onload = function() { Try it Yourself » ExampleVideo 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"); v.addEventListener('play',function() {i=window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);},false); Try it Yourself » ❮ HTML Canvas Reference Draw on the Canvas With JavaScriptAll drawing on the HTML canvas must be done with JavaScript: ExampleTry it Yourself » Step 1: Find the Canvas ElementFirst of all, you must find the This is done by using the HTML DOM method getElementById(): var canvas = document.getElementById("myCanvas"); Step 2: Create a Drawing ObjectSecondly, 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 CanvasFinally, 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); |