[jensgott]

Is it possible to add a HTML5 canvas on which is possible to draw using javascript?

I tried to add it directly in the HTML file but it gets overwritten all the time 🙂

Best regards
Jens G

[jensgott]

It was actually quit simple and works like a charm. I even got a html5 this nice frame work to go with it in native ios app. http://hyperandroid.github.com/CAAT

Add a transparent panel to you app. Remove the vertical scroll. Then go to your costum js file and add your init function to your phoneui.documentReadyHandler like this.

phoneui.documentReadyHandler = function() {
  init_Canvas();
}

My init funktion look like this where I’m using CAAT

function init_Canvas() {
       $("head").append(
         $('<script type="text/javascript" src="caat.js"></script>'));

  //create an HTML <canvas> tag
  var c=$('#m1-Untitled1-panel1')
  c.append('<canvas id="canvas_1" style="margin:5px auto" width="320" height="93"></canvas>');
}

You need to alter the m1-Untitled1-panel1 to fit you panel name offcause. I havent so far found any features I can not use from this kit. It also supports touch on the canvas.

Best
Jens G

[WaylandDavis]

Could you post how to draw to the panel? I’m placing an image on and IOS iPhone app and want to place 5 px “dots” in various colors on the image. I’ve got the panel there, but don’t know how to draw dots.

I tried this without any luck:

function drawdot(dotx, doty)
{
var c=document.getElementById(“m1-XYTest-panel1”);
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.arc(dotx,doty,5,0,2*Math.PI);
ctx.stroke();
}

thanks
wildwex

[paulD]

I would also really like to see an example of this working in mobione. I tried to recreate jensgott example and couldn’t get it to work.

If anyone has a simple example of a working canvas in mobione with one of the Javascript libraries like easelJS or CAAT it would really like to have a look! an example of drawing a simple shape to the stage would be awesome!

Thanks

Paul

[WaylandDavis]

PaulD:
I am trying to work with paper.js. I’ve gotten the javascript library to load, but still can’t get <canvas> to work as I think it should, etc.

This package has a really useful set of tools and techniques.

If I find out more, I’ll post here.

wildwex.

[paulD]

Thats great, same stage as me! Ive got the library loading without throwing a error but just cant get the object to draw on the canvas.

I’ll also post if i crack it. Good luck

[WaylandDavis]

Paul, thanks. That’s what makes these forums great.

All of us helping each other to succeed.

Looking forward to sharing with all the mobi community.

[support-michael]

>If anyone has a simple example of a working canvas in mobione with one of the Javascript libraries like easelJS or CAAT it would really like to have a look! an example of drawing a simple shape to the stage would be awesome!

I have worked with raphael.js with success but none of these.

I would have to research the level of canvas support on iOS as it was not completely supported at one time. Also please note that ios limits the max size of images. I’m on travel and don’t have access to my notes. A google search should provides some insight if there are platform limitations that apply to your context.

[paulD]

I did do a little looking and it seems that canvas is pretty much supported with mobile safari now so hopefully it should work.

http://caniuse.com/canvas

The only thing which i have heard is the performance is not great.

Paul

[Author]

Posts