Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Drawing Images and Videos

Published :
Author :
Adam Khoury
In this JavaScript exercise you will learn the three different types of parameter settings for drawing images, videos and canvas elements on the canvas element. <!DOCTYPE html> <html> <head> <style> body{ margin:40px; background:#666; } #my_canvas{ background:#FFF; border:#000 1px solid; } </style> <script> var my_pic = new Image(); my_pic.src = "meface.jpg"; function draw(){ var ctx = document.getElementById('my_canvas').getContext('2d'); // drawImage() can take either an HTMLImageElement, an HTMLCanvasElement, // or an HTMLVideoElement as the first parameter // drawImage(image, x, y); // ctx.drawImage(my_pic, 20, 20); // Positioning only // drawImage(image, x, y, w, h); // ctx.drawImage(my_pic, 20, 20, 100, 100); // Positioning and sizing // drawImage(my_pic, clipX, clipY, clipW, clipH, x, y, w, h); ctx.drawImage(my_pic, 0, 0, 200, 200, 20, 20, 200, 200); // Positioning, sizing, clipping } window.onload = draw; </script> </head> <body> <canvas id="my_canvas" width="500" height="350"></canvas> </body> </html>