1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    8
    Vote Rating
    0
    rapid is on a distinguished road

      0  

    Default HTML5 Canvas

    HTML5 Canvas


    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:
    Code:
    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:
    Code:
    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:
    Code:
    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:
    Code:
    • 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.

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    2
    Vote Rating
    0
    DarkBee is on a distinguished road

      0  

    Default


    You have to wait to call your draw function after the 'web app' is loaded, otherwise the canvas in non-existing
    Code:
    Ext.setup({
        onReady: function() {
            //Call your draw function
        }
    });

  3. #3
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    8
    Vote Rating
    0
    rapid is on a distinguished road

      0  

    Default


    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:
    Code:
    this.ctx = document.getElementById('canvas').getContext("2d");
    into this two lines:
    Code:
    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:
    Code:
    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

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Location
    Belgium
    Posts
    1
    Vote Rating
    0
    LenaertsSteven is on a distinguished road

      0  

    Default


    Much appreciated, this has helped me alot,... was searching for a solution to use canvas shapes for custom icons, thanx

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
    yagnyadatta is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. HTML5 in Ext GWT
    By Alona Oz in forum Ext GWT: Discussion
    Replies: 7
    Last Post: 31 Oct 2011, 4:06 PM
  2. HTML5 Recommendation
    By mschwartz in forum Community Discussion
    Replies: 13
    Last Post: 1 Jul 2010, 12:06 PM
  3. Drawing on canvas
    By bkraut in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 28 Jan 2010, 11:45 PM
  4. Canvas question
    By jsakalos in forum Community Discussion
    Replies: 11
    Last Post: 26 Oct 2009, 12:22 PM
  5. anyone doing a gxt canvas?
    By TheBuzzer in forum Community Discussion
    Replies: 4
    Last Post: 17 Oct 2008, 4:37 AM

Thread Participants: 4