PDA

View Full Version : HTML5 Canvas



rapid
8 Mar 2011, 2:13 PM
Hi,
im new to sencha-touch and im trying for a very long time to create a HTML5 canvas to draw various stuff on it.
I have tried really a lot and searched the Forum. However I was not able to find a solution that works for me. Im trying this, because I need to be able to import applications like the Examples from:
http://doc.qt.nokia.com/4.5/script-context2d.html
into my application.

I have posted my complete code and the error message of Chrom. I hope that anyone can help me. So far I am out of ideas :(

index.js:


Ext.setup({
onReady: function() {
var gui = new client_view(); //Creats the user interface (TabPanel)
var canv_pan = new canvas_panel(); //Creats a new Canvas
gui.add_apps(canv_pan); //adds the Canvas to the gui
canv_pan.update();
}
})
canvas_panel.js:


function canvas_panel(){

this.ctx;
this.panel = new Ext.Panel({
title: 'The Canvas',
width: 602,
height: 480,
borders: false,
plain: true,
id: 'myCanvas',

html: '<canvas id="canvas" width="600" height="400"></canvas>',
});

function draw(){
if (!this.ctx) {
this.ctx = document.getElementById('canvas').getContext("2d");
this.ctx.clearRect(0, 0, 600, 400);
//ctx.save();
this.ctx.fillStyle = "#232D38";
this.ctx.fillRect(0, 0, 600, 400);
this.ctx.translate(300, 200);
}
this.ctx.beginPath();
this.ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
this.ctx.moveTo(110,75);
this.ctx.arc(75,75,35,0,Math.PI,false); // Mouth
this.ctx.moveTo(65,65);
this.ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
this.ctx.moveTo(95,65);
this.ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
this.ctx.stroke();
}

draw();
return this.panel;
}
client_view.js:


function client_view(){
this.apps=[];

this.add_apps = function(app){
this.apps[this.apps.length]=[app];

if (this.apps.length >= 1) {
var myTabs = new Ext.TabPanel({
fullscreen: true,
ui : 'light',
sortable : true,
cardSwitchAnimation: false,
layout:{
type:"hbox",
align:"stretch" },
items: this.apps
});
};
}
}
the error message:




Uncaught TypeError: Cannot call method 'getContext' of null

drawcanvas_panel.js:56
canvas_panelcanvas_panel.js:74
Ext.setup.onReadyindex.js:10
(anonymous function)sencha-touch-debug.js:13755
(anonymous function)




Thanks a lot for any help.

DarkBee
16 Mar 2011, 4:38 AM
You have to wait to call your draw function after the 'web app' is loaded, otherwise the canvas in non-existing


Ext.setup({
onReady: function() {
//Call your draw function
}
});

AndreaCammarata
16 Mar 2011, 5:35 AM
Hi all,
I developed a plugin that allow you to import Adobe Illustrator canvas animations inside a panel body.
It perfectly works but...canvas rendering process is really slow on iPad / iPhone and your device run out of battery really slow, so I decided to dismiss this extension for the moment.
I really suggest you to don't use canvas elements inside your Sencha Touch applications for these reasons if you need a canvas rendering loop.

However if you have to render a canvas element once without a rendering loop, that's ok.

Hope this helps.

rapid
16 Mar 2011, 11:27 AM
Thanks for your answers,
by now I have found the solution for the problem.



DarkBee: You have to wait to call your draw function after the 'web app' is loaded, otherwise the canvas in non-existing

You are right, however this was not what caused the problem.

I solved the problem by adding the html-code (containing the canvas element) as an item of the panel and by changing this line of the original draw function:

this.ctx = document.getElementById('canvas').getContext("2d");

into this two lines:


this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext("2d");


Now I can call the draw method from inside of the CanvasPanel-class or even from outside and it works.

Here you can see the complete code of the changed class:


this.CanvasPanel = function() {

this.canvas;
this.ctx;

this.pan = new Ext.Panel({
title: 'The Canvas',
fullscreen: true,
borders: false,
plain: true,
cls: 'green2',
id: 'myCanvas',
items: [{
scroll: false,
html: "<p>before<p><canvas width='800' id='canvas' height='800'/><p>after<p>"
}]
});

this.draw = function(){
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext("2d");
this.ctx.clearRect(0, 0, 600, 400);
//ctx.save();
this.ctx.fillStyle = "#232D38";
this.ctx.fillRect(25,25,100,100);
this.ctx.clearRect(45,45,60,60);
this.ctx.strokeRect(50,50,50,50);

this.ctx.fillRect(25,25,100,100);
this.ctx.clearRect(45,45,60,60);
this.ctx.strokeRect(50,50,50,50);
}
}


Since I am new to JavaScript and its special way of objectorientation a night of coding and lot of try and error leaded me to this solution (also a bottle of wine was involved too :)) )
I hope this will help a lot of the people trying to use a dynamically created canvas with Sencha-Touch.

Best regards
rapid

LenaertsSteven
29 Apr 2011, 11:01 AM
Much appreciated, this has helped me alot,... was searching for a solution to use canvas shapes for custom icons, thanx

yagnyadatta
5 Apr 2013, 2:04 AM
Hii Rapid,

Thanks for your post. But when I am trying to run your code I am getting an error on index.js page :-/. Though I have declaired it correctly.

Code:
Ext.setup({ onReady: function() {
var gui = new client_view();
var canv_pan = new canvasPanel();
gui.add_apps(canv_pan);
canv_pan.update();
}
});

getting error: Uncaught ReferenceError: Ext is not defined.
on line no 2.

Please provide some solution. Any help would be great.:)