A new way to stretch lines between dragged boxes
Know what I just realized? Canvas has arrived in all the browsers I care about daily, and I see a hack brewing for that other one for which I don't care so much.
I suppose sometime soon, when free time comes, I should revisit my box dragging demo and ditch that clunky transparent GIF deformation crap I'd tried refining last summer.
I wonder: Does a canvas play well in layers with other page elements?
I've been working on a project using with canvas in layers, testing Firefox, Sa,fari and the Opera 9 beta (all on the Mac, with some testing of FF on a PC). My experience has been pretty good.
The following is from a note I sent to the canvas-developers Yahoo group.
I've implemented a first version of a draggable, zoomable map, using a canvas and drawImage. The basic idea is to use a relatively high-resolution map which the canvas 2d drawImage method can zoom and pan as needed.
Here's a simple example, showing a button-driven interface to the zoom pan (x-axis movement) tilt (y-axis movement) methods:
The second example is more what I want to be able to do, but I've run into a couple of problems. One is that it seems relatively difficult to reliably resize canvas elements. Another is that Safari seems to require a 'click' to refresh the screen after a resize.
I've also had 'artifact' problems from time to time under Safari when dragging text elements with borders on top of a canvas, but this isn't easy to recreate.