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	Hello all - I'm having a bit of trouble with the html canvas, and thought I'd ask for help. I've only just started playing around with it and already I'm a bit rubbish. If anyone can offer some guidance to where I'm going wrong it would be very much appreciated. I've been trying to put together some Javascript that dynamically adds a canvas to a page, and then draws something (anything) to it. I've been able to do all the procedurally just fine, but I've been trying to do it in an object-oriented way, which has gone a bit wrong. Here's my code: [code]function world(x,y) { this.x = x; this.y = y; this.create = function() { thecanvas = document.createElement("canvas"); thecanvas.id = "worldcanvas"; thecanvas.style.width = this.x + "px"; thecanvas.style.height = this.y + "px"; thecanvas.width = this.x + "px"; thecanvas.height = this.y + "px"; window.document.body.appendChild(thecanvas); getcanvas = document.getElementById("worldcanvas"); } }[/code] I'm then calling "myworld = new world(200,500)", and then "myworld.create()". This seems to successfully plonk a canvas onto the page. However, a second seperate function, that is supposed to get the canvas and then draw to it, doesn't work: [code]function draw(o) { ctx = document.getElementById(o).getContext("2d"); ctx.fillRect(10,10,55,50); }[/code] I call that with "draw('worldcanvas')". According to Chrome's developer tools thing the canvas element is being created properly, and it seems to be getting the 2d context of the canvas element ok too, but nothing appears. Any ideas? Apologies if the answer is obvious! I have a feeling I'm not quite comprehending OO javascript and that's why I can't do it... Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu