Here's something I wrote ages ago as Java applet. I want to convert it into JavaScript and run in html5 canvas in the browser. From what I can see, canvas makes the most sense here. (SVG / DIV techniques aren't so friendly for what I want to do.) The canvas does allow for mouse drag and visual update, something you need to be able to understand the concepts displayed.
Actually that is four separate applets. This doesn't translate perfectly well to canvas. I'm not sure the best way to make this update to JavaScript/Canvas. I think I have three choices:
- One large canvas, divided into fourths. (The problem here is when you grab and drag the control elements there is nothing stopping that drag from hitting a neighboring technique. I could program internal boundaries, but where is the fun in that? This is my least favorite option.)
- Four individual canvases (spelling?), each with its own #id.
- four iframes with each canvas as a stand alone in its own html file. These would all be hosted at the same server.
Anybody got an opinion on best technique to proceed for displaying four functional graphic boxes (and why?) As I understand it, because I'm asking for an opinion, this question doesn't really fit over at stackoverflow…
Best Answer
I think you'd be best with 4 canvas elements. That would give each its own context, and allow you to respond to mouse events on them more simply. Plus from the drawing perspective, you won't have to worry about clipping. iframes would be completely unnecessary here.
By the way, you may want to look into some Canvas based libraries like Fabric.js, as they may make interactions with the graphics easier to do.