The HTML5 canvas element is a webpage container for graphics. You can use JavaScript to draw within the canvas element. In this article to learn how to place an image in a canvas element. The html code for a canvas element is shown below, place this code in the body section of your webpage.
<canvas id="myCanvas" width="400" height="250"></canvas>
Note that the value of the id attribute for the canvas element is "myCanvas". We would like to apply some style to the canvas element. I found that it causes problems when you specify width and height elements as style properties for the canvas element. But you may specify a border and background color in a style block as shown below. Place this code in the head section of your webpage document.
<style>
#myCanvas
{
border-style:solid;
background-color:yellow;
}
</style>
Next we'll create a JavaScript code block to draw on the canvas. Code for the shell of a function named drawScreen is shown below. Place this code in the head section of the webpage document.
<script>
function drawScreen()
{
}
window.onload = drawScreen;
</script>
Note that we define the window.onload event to execute the drawScreen function. The window.onload event fires at the end of the document loading process. At that point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
Within the drawScreen function, first we use document.getElementById method to get a pointer to the canvas object. We then use the .getContext method to get a handle to the canvas context.
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d");
The context is a list of the drawing methods. You might think of these as the tools in a draftsman's or artists kit. It contains such things as fillStyle, strokeStyle, lineWidth, and many other tools. After getting a handle to the context, we set its fillStyle property to "yellow" and use its fillRect method to fill the canvas background with yellow.
context.fillStyle = "yellow"; context.fillRect(0,0,400,250);
Next, we create a new image element and set its src attribute to the path to the image that we want to draw on the canvas. We then assign a function to the Image.onload event that calls the drawImage method, passing it the x,y location on the canvas to draw the image, and the width and height of the image, an example is shown below.
var myImage = new Image();
myImage.src = "alien.gif";
myImage.onload = function()
{
context.drawImage(myImage,30,30,100,192);
};
Lastly, to draw some text next the image, we set the context fillStyle property to "black", the context font property to "40px verdana" and then call the fillText method to draw the text, passing it the text "Hello Earth!" and the x,y location on the canvas to draw the text, as shown below.
context.fillStyle = "black";
context.font = "40px verdana";
context.fillText("Hello Earth!",130,100);
Shown below is the entire code for the "Hello Earth!" example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#myCanvas
{
border-style:solid;
background-color:yellow;
}
</style>
<script>
function drawScreen()
{
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d");
// background
context.fillStyle = "yellow";
context.fillRect(0,0,400,250);
// image
var myImage = new Image();
myImage.src = "alien.gif";
myImage.onload = function()
{
context.drawImage(myImage,30,30,100,192);
};
// text
context.fillStyle = "black";
context.font = "40px verdana";
context.fillText("Hello Earth!",130,100);
}
window.onload = drawScreen;
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="250"></canvas>
</body>
</html>
More Java Script Code:
• Java Script Message Boxes
• Disable IE8 Accelerators on Your Website
• Java Script Code to Factor Numbers
• JavaScript to Set Checkbox to Readonly
• Using the Java Script Date Object
• Java Script Code to Calculate Speed / Distance of Falling Object
• Including Special Characters in a JavaScript String
• HTML5 Canvas JavaScript Code to a Draw Bezier Curve
• Easy Code for Animated Banner - Squeeze Text
• Easy Slide Show Code with Mouseover Pause