Canvas help — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

Canvas help

This page's ID: 31708

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	The resolution of a Canvas is intrinsic: it doesn't have units. Therefore you should remove the [b]+"px"[/b] when setting the width and height of the canvas otherwise the user agent will ignore these assignments and default to 300 x 150. See the spec:[quote]The canvas element has two attributes to control the size of the coordinate space: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.[/quote][small][url=http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element]source[/url][/small] Would be nice to see a page showing what you've got 'coz it's hard to get the whole picture with only these two snippets. From what I can see, you seem indeed a little flunky with OO in JavaScript :p Why you don't put the Canvas or Context as a private variable of your class eludes me, same thing about the hardcoded [i]id[/i] of the canvas and why [i]draw()[/i] isn't a public method of the class. Here's how I'd approach such code:[code]function World( w, h ) { var _canvas = document.createElement('canvas'), _context; _canvas.width = w; _canvas.height = h; _context = _canvas.getContext('2d'); this.create = function() { _canvas.style.width = this.x + 'px'; _canvas.style.height = this.y + 'px'; window.document.body.appendChild( _canvas ); } this.draw = function() { _context.fillRect( 10,10, 55,50 ); } } var myWorld = new World( 200,500 ); myWorld.create(); myWorld.draw(); [/code]HTH, [url=http://www.p01.org/][sigrotate][img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_love.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_love_small.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_charly.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_dk.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_reason.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_galaxy.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_neon88x31.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_teapot.png[/img][/sigrotate][/url] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu