{
  "attachments": [],
  "comments_archived": true,
  "date": "2006-01-13T15:38:07.000Z",
  "layout": "post",
  "tags": [
    "asides"
  ],
  "title": "A new way to stretch lines between dragged boxes",
  "wordpress_id": 820,
  "wordpress_slug": "a-new-way-to-stretch-lines-between-dragged-boxes",
  "wordpress_url": "http://decafbad.com/blog/?p=820",
  "year": "2006",
  "month": "01",
  "day": "13",
  "isDir": false,
  "slug": "a-new-way-to-stretch-lines-between-dragged-boxes",
  "type": "entry",
  "postName": "2006-01-13-a-new-way-to-stretch-lines-between-dragged-boxes",
  "html": "<p>Know what I just realized?  <a href=\"http://www.whatwg.org/specs/web-apps/current-work/#canvas\">Canvas</a> <a href=\"http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas\">has</a> <a href=\"http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html\">arrived</a> in all the browsers I care about daily, and I see a hack <a href=\"http://me.eae.net/archive/2005/12/29/canvas-in-ie/\">brewing</a> for that other one for which I don't care so much.  </p>\n<p>I suppose sometime soon, when free time comes, I should revisit my <a href=\"http://www.decafbad.com/blog/2005/07/02/drag_the_boxes_stretch_the_lines\">box dragging demo</a> and ditch that clunky transparent GIF deformation crap I'd tried refining last summer.  </p>\n<p>I wonder: Does a canvas play well in layers with other page elements?</p>\n<div id=\"comments\" class=\"comments archived-comments\"><h3>Archived Comments</h3>\n<ul class=\"comments\">\n<li class=\"comment\" id=\"comment-221086996\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://www.entish.org/willwhim\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=4b85e6b127c527c8dcebe18d1c985e48&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://www.entish.org/willwhim\">Will Fitzgerald</a>\n</div>\n\n\n<p><a href=\"#comment-221086996\" class=\"permalink\"><time datetime=\"2006-01-14T15:29:58\">2006-01-14T15:29:58</time></a></p>\n</div>\n\n\n<div class=\"content\"><p>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.</p>\n<p>The following is from a note I sent to the canvas-developers Yahoo group.</p>\n<p>I've implemented a first version of a draggable, zoomable map, using a\ncanvas and drawImage. The basic idea is to use a relatively\nhigh-resolution map which the canvas 2d drawImage method can zoom and\npan as needed.</p>\n<p>Here's a simple example, showing a button-driven interface to the zoom\npan (x-axis movement) tilt (y-axis movement) methods:</p>\n<p><a href=\"http://www.entish.org/mapviewer/example.html\" title=\"First example\" rel=\"nofollow\">http://www.entish.org/mapviewer/example.html</a></p>\n<p>The second example is more what I want to be able to do, but I've run\ninto a couple of problems. One is that it seems relatively difficult\nto reliably resize canvas elements. Another is that Safari seems to\nrequire a 'click' to refresh the screen after a resize. </p>\n<p><a href=\"http://www.entish.org/mapviewer/tube.html\" title=\"Second example\" rel=\"nofollow\">http://www.entish.org/mapviewer/tube.html</a></p>\n<p>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.</p></div>\n\n\n</li>\n</ul>\n\n\n</div>\n\n\n",
  "body": "Know what I just realized?  [Canvas][] [has][ff] [arrived][saf] in all the browsers I care about daily, and I see a hack [brewing][ie] for that other one for which I don't care so much.  \r\n\r\nI suppose sometime soon, when free time comes, I should revisit my [box dragging demo][drag] and ditch that clunky transparent GIF deformation crap I'd tried refining last summer.  \r\n\r\nI wonder: Does a canvas play well in layers with other page elements?\r\n\r\n[canvas]: http://www.whatwg.org/specs/web-apps/current-work/#canvas\r\n[drag]: http://www.decafbad.com/blog/2005/07/02/drag_the_boxes_stretch_the_lines\r\n[saf]: http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html\r\n[ff]: http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas\r\n[ie]: http://me.eae.net/archive/2005/12/29/canvas-in-ie/\r\n\r\n<div id=\"comments\" class=\"comments archived-comments\">\r\n            <h3>Archived Comments</h3>\r\n            \r\n        <ul class=\"comments\">\r\n            \r\n        <li class=\"comment\" id=\"comment-221086996\">\r\n            <div class=\"meta\">\r\n                <div class=\"author\">\r\n                    <a class=\"avatar image\" rel=\"nofollow\" \r\n                       href=\"http://www.entish.org/willwhim\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=4b85e6b127c527c8dcebe18d1c985e48&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\r\n                    <a class=\"avatar name\" rel=\"nofollow\" \r\n                       href=\"http://www.entish.org/willwhim\">Will Fitzgerald</a>\r\n                </div>\r\n                <a href=\"#comment-221086996\" class=\"permalink\"><time datetime=\"2006-01-14T15:29:58\">2006-01-14T15:29:58</time></a>\r\n            </div>\r\n            <div class=\"content\"><p>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.</p>\r\n\r\n<p>The following is from a note I sent to the canvas-developers Yahoo group.</p>\r\n\r\n<p>I've implemented a first version of a draggable, zoomable map, using a\r\ncanvas and drawImage. The basic idea is to use a relatively\r\nhigh-resolution map which the canvas 2d drawImage method can zoom and\r\npan as needed.</p>\r\n\r\n<p>Here's a simple example, showing a button-driven interface to the zoom\r\npan (x-axis movement) tilt (y-axis movement) methods:</p>\r\n\r\n<p><a href=\"http://www.entish.org/mapviewer/example.html\" title=\"First example\" rel=\"nofollow\">http://www.entish.org/mapviewer/example.html</a></p>\r\n\r\n<p>The second example is more what I want to be able to do, but I've run\r\ninto a couple of problems. One is that it seems relatively difficult\r\nto reliably resize canvas elements. Another is that Safari seems to\r\nrequire a 'click' to refresh the screen after a resize. </p>\r\n\r\n<p><a href=\"http://www.entish.org/mapviewer/tube.html\" title=\"Second example\" rel=\"nofollow\">http://www.entish.org/mapviewer/tube.html</a></p>\r\n\r\n<p>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.</p></div>\r\n            \r\n        </li>\r\n    \r\n        </ul>\r\n    \r\n        </div>\r\n    ",
  "parentPath": "./content/posts/archives/2006",
  "path": "2006/01/13/a-new-way-to-stretch-lines-between-dragged-boxes",
  "needsBuild": true,
  "prevPostPath": "2006/01/11/got-your-music-store-butting-into-my-library",
  "prevPostTitle": "Got your music store butting into my library",
  "nextPostPath": "2006/01/13/i-cant-get-too-ticked-at-oreilly-and-intellitxt",
  "nextPostTitle": "I can't get too ticked at O'Reilly and IntelliTXT"
}