HTML 5 and Javascript printing an SVG to the Canvas

Page 1 of 1

1 Replies - 337 Views - Last Post: 20 January 2013 - 08:54 PM

#1 Glorfindal  Icon User is offline

  • DragonCraft Developer
  • member icon

Reputation: 23
  • View blog
  • Posts: 530
  • Joined: 31-December 08

HTML 5 and Javascript printing an SVG to the Canvas

Posted 20 January 2013 - 06:52 PM

I am working on a browser based game in HTML5 using the canvas. I plan to offer an option in the game to play fullscreen and I read that the SVG format is best to use in these cases as it can scale images without distortion. I created a png as my background and used a website to convert it to an SVG.

Now I am trying put the SVG image on the canvas, however, when I launch my browser I don't see anything. Below is my code. I am new to HTML5 so please excuse any dumb mistakes.

index.htm
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Xcraft Engine: Test</title>
        <script type="text/javascript" src="Engine/main.js"></script>
    </head>
    <body>
        <canvas id="xCraftWindow" height="100%" width="100%">        
        </canvas>
    </body>
</html>


main.js
//Main Javascript file created by Richard on Sunday January 20, 2013

window.onload = initialize()
function initialize() {
    var xCraft = document.getElementById("xCraftWindow").getContext("2d");

    var background = new Image;
    background.onload = function() { xCraft.drawImage(img, 0, 0); };
    background.src = "Images/titlescreen.svg";    
}


Is This A Good Question/Topic? 0
  • +

Replies To: HTML 5 and Javascript printing an SVG to the Canvas

#2 NathanMullenax  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 81
  • View blog
  • Posts: 176
  • Joined: 23-September 12

Re: HTML 5 and Javascript printing an SVG to the Canvas

Posted 20 January 2013 - 08:54 PM

You aren't going to get the benefit of a vectorized image format (such as SVG) if you are merely converting a pixel-based (such as PNG) format to a vector one. You should probably just stick with drawing the PNG on the canvas element.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1