Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

How to Place Image on HTML5 Canvas

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 Code to Factor Numbers
• Easy Java Script Animation
• Sams Teach Yourself HTML5 in 10 Minutes
• Calculators for Your Web Site : Body Mass Index
• Java Script Trim Function
• Easy Slide Show Code
• Concatenating a String and Another Data Type
• JavaScript Cookbook
• Use JavaScript parseInt() and parseFloat() to Convert Strings to Numbers
• A Cross-Browser Solution for Handling JavaScript Events

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268