Javascript Canvas Sizes

Question 1

Question by user1460819

I have a canvas on a HTML page:
<canvas id="canvas" class="canvas"></canvas>
Attributes width and height stretch the canvas into a certain field, but do not resize it (so, var canvasElement = document.getElementById('canvas'); canvasElement.width = 400; canvasElement.height = 400; doesn’t work. How can I resize the canvas (make it something not equal to 160*320)?

Answer

Answer by Starx

Starx

You can do it, this way.

var canvasElement = document.getElementById('yourCanvasElement');
canvasElement.width = 500;
canvasElement.height = 400;

Question 2

Question by Develop Smith

Develop Smith

I want to control a canvas that is automatically created in the run-time.
The problem here is that jQuery function will have to deal with a content that isn’t exist when the page is ready.

$(document).ready(function(ee) {
     $("#containerInsertBtn").click(function(e) {
         e.preventDefault();
         $("#container").html("<canvas width='300' height='300' id='tk'>fall</canvas>");    
    });

    $("#tk").click(function(eg) {
        alert('tic');
    });

});

The HTML Markup:

<div id="container" contenteditable="true"></div>
<button id="containerInsertBtn">Add Canvas</button>

Answer

Answer by Starx

Starx

Your code does not work because a dynamically created element will not be included on DOM while the event handler is executed.

Your solution is event delegation. jQuery has .on() to do that.

$("body").on('click', '#tk', function(e) {
    //....
});

You need to specify a parent container to delegate the events to its child elements liek #tk

If you want to delegate to a element based on its tag name, its as same as the above.

$("body").on('click', 'canvas', function(e) {
    console.log($(this)); // you can access the active element by using $(this)
    //....
});

Question 3

Question by Richard

Richard

I have been developing a game in the HTML5/Javascript new canvas feature, and all is going great, until I started to test it on Internet Explorer 9. So I will vaguely ask, are there any tips on getting the game to work fully in IE9?

Here’s what I know:

1) I must include

<!DOCTYPE html5>

else IE9 cannot possibly figure out that I indeed intend to use HTML5, and not an older version.

2) IE9 must be explicity told to run in IE9 mode, and not in IE8 mode, since clearly everyone who upgrades to IE9 intends to run it in IE8 mode by default.

3) .ttf files make IE9 unhappy. This is a problem, because the font files that DO work with IE9 (namely, .eof) seem to be disregarded by Firefox and other real browsers. Any tips of getting this fixed?

4) Finally, my biggest problem, after getting all else to work: only SOME of the graphics get drawn to the screen. In short, the game’s “engine” is split into several systems. Some, such as the particles (basically, just a collection of moving spheres) are draw, while others, such as all of the sprites, are not drawn, but the health bar is drawn. They all use the same exact draw methods, so I really can’t wrap my head around why some work and some don’t. There’s a lot of stuff to draw, but again, real browsers handle it just fine.

I know this is vague, but I’m just hoping somebody has some experience with this and can link me to a proper tutorial or else give me a hint as to how I can go about fixing this. It seems to be a project all its own just to get IE9 to run the code that works perfectly on Firefox, Safari, Chrome and Opera. Thanks, all help is very much appreciated.

Answer

Answer by Joseph the Dreamer

Joseph the Dreamer

<!DOCTYPE html> only tells the browser to use standards mode. HTML5 was built to fail gracefully incase the browser supports it. An example is the datepicker input which gracefully fails on all browsers (except Opera which supports it) as a text type input.

The DOCTYPE is retained in HTML5 as a “mostly useless, but required” header only to trigger “standards mode” in common browsers.

The doctype does not tell the browser what version of HTML. That’s the DTD’s job. The DTD just tells the browser what’s valid markup in your markup. It’s only used in validation to determine what HTML you use (HTML or XHTML; loose, transitional or strict). In HTML5’s case, there is no DTD because there’s no use for it.
You can force IE to render in it’s latest mode or in chrome frame with a meta command, but it’s usually unnecessary. Declaring strict mode using the doctype as well as using proper markup is enough to do the job.
```
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
```
Paul Irish’s bulletproof @fontface syntax should put your fonts in an “all-in-one” syntax so that the same code can be loaded on all browsers.
I don’t know about you but IE9+ has basic support and text support for canvas which is at par with the browsers of it’s age. IE even has it’s own testdrive page for versions 9 and up to show off their HTML5 support. There must be something wrong with your code.

Answer

Answer by Starx

Starx

HTML5 is already supported my IE9. Here is an example of it. Be sure check the developers guide while doing this.

Question 4

Question by android.nick

android.nick

I’m trying to create line graphs like the one in the image below.

It needs to have a very light weight(in kb), and needs to have points that I could hover(for a tooltip about that point, like in the image). I don’t need pie charts or anything like that, just line graphs like above.

I’m just not sure how to go about it best, I don’t know canvas, and i’m assuming that might be pretty complex trying to do what I need with canvas. I know jQuery decently well.

I’m wondering: Is there a very light weight framework/plugin that would allow me to do just the bare essentials like in the image? If not, how would you suggest going about this with jQuery?

All I need are the lines drawn, with points that I could trigger a hover on, I can take care of the tooltip and all that, i’m just trying to figure out how to draw all the lines the match up with the grid, and get the little circle elements in the right position.

Thanks so much.
ps: light weight to me is not more than a few kb, because I want them to be interactive(not just a static image), but i’m not going to have so many of them that I need a huge jquery plugin, just something small.

Also: I’m trying to make it so it’s responsive, and shrinks to fit a phones screen.

Answer

Answer by Starx

Starx

If you are not planning any manipulation on the graphs. Use a PHP library called pChart

Tag: canvas

Javascript Canvas Sizes

Question by user1460819

Answer by Starx

How to deal with content that will be added later in jQuery?

Question by Develop Smith

Answer by Starx

Are there any tips on getting HTML5 canvas to work in IE9?

Question by Richard

Answer by Joseph the Dreamer

Answer by Starx

Best way to go about making "simple" line graphs with a very light footprint? jquery? canvas?

Question by android.nick

Answer by Starx

Please fill the form - I will response as fast as I can!