#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    2

    Adding an image to a javascript graphic


    Hello
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script> 
    //alerts the user to possible errors in the page 
    alert("This interactive graphic uses the <canvas> tag in HTML5 please use a browser that offers support for HTML5"); 
    </script> 
    <!--defines the background image for the page--> 
    <style> 
    body 
    {
    background-image:url(start_screen.png);
    background-position:relative; 
    background-repeat:no-repeat;
    }
    </style> 
    <title> TraLab | Windows Blue Simulator</title> 
    </head>
    <body> 
    <canvas id="myCanvas" width="1000" height="600"></canvas> 
    <script> 
    //get the element that will be edited with javascript
    var $myArt = document.getElementById("myCanvas"); 
    //import the two dimensional graphics library and assign it to a variable 
    var $myBook = $myArt.getContext("2d");
    //create the static graphics of the page
    $myBook.fillStyle="#00A01C";
    $myBook.fillRect(390,200,140,140); 
    $myBook.fillStyle="#BE1C4B";
    $myBook.fillRect(540,200,140,140); 
    $myBook.fillStyle="#BE1C4B";
    $myBook.fillRect(390,350,140,140); 
    $myBook.fillStyle="#2D8BEF";
    $myBook.fillRect(540,350,140,140); 
    $myBook.fillStyle="#DB562D";
    $myBook.fillRect(690,200,140,290); 
    $myBook.fillStyle="#00A01C";
    $myBook.fillRect(840,430,60,60); 
    $myBook.fillStyle="#BE1C4B";
    $myBook.fillRect(840,360,60,60); 
    $myBook.fillStyle="#2D8BEF";
    $myBook.fillRect(909,360,60,60);
    $myBook.fillStyle="#00A01C";
    $myBook.fillRect(840,200,130,150);
    $myBook.stroke(); 
    </script> 
    </body> 
    </html>
    Ok so what I want to do is on top of each of the multicolored boxes I want to embed an image for example a house for the home tab. But all the colored shapes will be animated to move so I cannot simply embed with the <img tag> thanks ~ Nick
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Do an online search for "canvas drawImage()"; that should get you started..., with do what your wanting to do.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    2
    thanks

IMN logo majestic logo threadwatch logo seochat tools logo