bokemono

I found some code for drawing bezier curves that looked interesting here:

and thought it might be a good exercise to port it to max/jitter. I've looked over the

canvas-example.maxpat and js tutorials, but it looks like I will have to learn more about the window object in html5 and canvas element.

It looks like, conceptually, I need to substitute jsui and MaxCanvas() for the html browser window and canvas functions/methods/functions. If someone is willing to take a quick look at the code and point me in the right direction. I'd really appreciate it.

and thought it might be a good exercise to port it to max/jitter. I've looked over the
canvas-example.maxpat and js tutorials, but it looks like I will have to learn more about the window object in html5 and canvas element. 

porting-html5canvasapi-javascript

After much trial and error, I was able to port all of the code. Unfortunately, I'm not able to utilize examples/javascript/ui-mgraphics/mgraphics-hittest.maxpat within the ported code for mouse handling.

As you will see, it is a bit of a hack. I was hoping to use MaxCanvas() to port the canvas code, then use mgraphics to redraw control points from the original script to interface with the hittest code. I am able to draw a circle with the mgraphics "ellipse" and the canvas "arc" commands, but somehow, these initial coordinates never get updated by mouse position.

From post() commands, I can see that all the mouse events reference the entire canvas rather than just the circle. I'm guessing this happens because of MaxCanvas.

I've attached script and jsui patch. Is there a way I can make this work, or do I have to figure out how to rewrite the canvas commands?

As you will see, it is a bit of a hack. I was hoping to use MaxCanvas() to port the canvas code, then use mgraphics to redraw control points from the original script to interface with the hittest code. I am able to draw a circle with the mgraphics "ellipse" and the canvas "arc" commands, but somehow, these initial coordinates never get updated by mouse position. 

From post() commands, I can see that all the mouse events reference the entire canvas rather than just the circle. I'm guessing this happens because of MaxCanvas. 

Update. In case anyone is interested. Mgraphics wasn't the problem. There was an errant bit of code that was causing the behavior. I am able to make the hittest work. Now, I just have to figure out how to plug the coordinates into the ported code.

porting html5/canvasAPI javascript