<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Drawing an image on the Canvas</title> <style> canvas { border: 3px solid pink; } </style> <script> window.onload = function() { const canvas = document.getElementById("myCanvas"); const context = canvas.getContext("2d"); const image = new Image(); image.src = "examples/resources/image-tree.png"; // Wait for the image to load image.onload = function() { // Draw the image on the canvas context.drawImage(image, 50, 50, 200, 150); }; }; </script> </head> <body> <canvas id="myCanvas" width="400" height="300"></canvas> </body> </html>