Download code

Jump to: navigation, search

Back to Canvas_Element_(HTML)

Download for Windows: single file, zip

Download for UNIX: single file, zip, tar.gz, tar.bz2

canvas.html

 1 <!DOCTYPE HTML>
 2 <html>
 3   <head>
 4     <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
 5     <script>
 6       var myImage = new Image();
 7       function init() {
 8         myImage.onload = update; // call update when image is loaded 
 9         myImage.src = "http://upload.wikimedia.org/wikipedia/" +
10           "commons/thumb/2/25/HTML5_Shiny_Icon.svg/" +
11           "200px-HTML5_Shiny_Icon.svg.png";
12       }
13       function update() {
14         // get canvas and context
15         var myCanvas = document.getElementById("mycanvas");
16         var myContext = myCanvas.getContext("2d");
17        
18         // set canvas size to window size
19         myCanvas.width = window.innerWidth; 
20         myCanvas.height = window.innerHeight;
21               
22         // clear context to transparent black
23         myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);
24        
25         // render in front-to-back order 
26         myContext.globalCompositeOperation = "destination-over"; 
27        
28         // write some text in black
29         myContext.fillStyle = "#000000"; 
30         myContext.font = "bold 48px Helvetica, sans-serif"; 
31         myContext.textAlign = "center";
32         myContext.textBaseline = "middle";
33         myContext.fillText("Hello, world!", 170, 60);
34        
35         // draw the image (behind the text)
36         myContext.drawImage(myImage, 10, 20, 50, 51);
37        
38         // fill the background of the canvas with light blue
39         myContext.fillStyle = "#C0C0FF"; 
40         myContext.fillRect(0, 0, myCanvas.width, myCanvas.height);
41       }
42     </script>
43   </head>
44   <body bgcolor="#000000" onload="init()" onresize="update()">
45     <canvas width="400" height="300" id="mycanvas"
46       style="position:absolute; left:0px; top:0px; "></canvas>
47   </body>
48 </html>
49 


hijacker
hijacker
hijacker
hijacker