Menu
Importing images into a canvas is basically a two step process: Get a reference to an HTMLImageElement object or to another canvas element as a source. It is also possible to use images by providing a URL. Draw the image on the canvas using the drawImage() function.
<canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, combine photos, or create simple animations.
I am currently testing using the <canvas> element to draw all of the backgrounds (I will add effects later to these images later and is the reason I'm not using CSS to load the images). That said, I'm currently having difficulty loading a image on to the canvas. Here is the code:
<html> <head> <title>Canvas image testing</title> <script type="text/javascript"> function Test1() { var ctx = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); //Loading of the home test image - img1 var img1 = new Image(); img1.src = 'img/Home.jpg'; //drawing of the test image - img1 img1.onload = function () { //draw background image ctx.drawimage(img1, 0, 0); //draw a box over the top ctx.fillStyle = "rgba(200, 0, 0, 0.5)"; ctx.fillRect(0, 0, 500, 500); }; } } </script> <style type="text/css"> canvas { border: 2px solid black; width: 100%; height: 98%; } </style> </head> <body onload="Test1();"> <canvas id="canvas" width="1280" height="720"></canvas> </body> </html> I think that I'm not loading the image correctly, but I'm not sure.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With