Drawing on a canvas with Hype

1

I have a number of interactive graph that I’ve written with html and javascript. I first used Apple’s Dashcode but that is no longer useable. I moved to iAd Producer which worked nicely but I not find that the output now doesn’t work in Chrome or Firefox. It’s fine in Safari and iBooks. An example is on the page https://www.boomer.org/c/p4/js/w1902/index0.html

I thought it should be possible to reproduce this functionality with Hype. I may have asked this question some time back but it possible using Javascript to draw lines in response to button presses in Hype.

Thanks,

2

short answer … yes. Javascript and Hype work well together however depending on what you require it to do can be easy or difficult to implement.

3

I’ve used Javascript with Hype but I now want to use JS within Hype to draw on a canvas in response to button presses. I’m not sure if this is possible or easy. There doesn’t need to be a canvas as such, drawing on the scene background would probably work. I haven’t found those functions yet. Basically set line color and moveto x,y is all I need.

Thanks,

4

closer to the difficult end of the spectrum ....

@h_classen's work. The tools are there to set up a canvas and draw on it. Obviously this example is quite complex but if you have experience you could probably work it out. :wink:

5

Thanks for that example. Still looking for where the canvas is defined. It looks like moveTo, lineTo, etc. are available once the canvas, context, cts is defined. Maybe a global search of the file. :wink:

Thanks, Daivd

6

Check on scene load :wink:

7

Thanks, I found it. But haven’t got it working yet… close.

function loadscene(hyperDocument, element, event ) {

/*	
mandala = document.getElementById("canvasSignature");

context = mandala.getContext("2d");
with(context)
{
strokeStyle = 'rgb(50,50,50)';
fillStyle =  'rgb(50,50,50)';
lineWidth = 6;
miterLimit = 2;
lineCap= "round";
globalAlpha = 1;
}
*/
alert('Hello World1')
/*
context.beginPath()

context.moveTo(100,100)
context.lineto(200,200)

context.closePath()
*/
alert('Hello World2')

}

With the sections uncommented I don’t see a line but I’m not sure where the canvasSignature value is coming from. With the comments as shown the two alerts appear on loading the scene.

Thanks

8

I believe it’s the ID of the <canvas> tag in the innerHTML of one of the rectangles in the scene

9

I was thinking something like that. I found it in the index.html file.

Index.html segment

I don’t think I’m meant to edit index.html but this element must have been added somehow?? I don’t think its a ‘regular’ element.

Thanks, David

Follow-up

Add an element, a rectangle. Double-click and click on the pencil to edit the innerHTML. Add a canvas element like

<canvas id="canvasSignature" width="200" height="200"></canvas>

Now it works!!

Looks simple now :wink:

10

This error happens because of apple is using something called webkit point which is not supported for android and google chrome. if you go to JS you can find a js called optimized. from there you have to edit some lines. but i am also still searching how to dit those lines and what are those lines.

11

I found the optimized.js file. I tried commenting out a line or two but no luck. Beyond me what they are doing there. Unfortunately, with their dropping iAd I feel they may drop iAd Producer support as well. I thought Hype might be a good choice going forward. Now that I can draw on a canvas it may just work.

12

did you create any drawing pad using hype? that works in windows?