sketchbook/comic in HTML5 <canvas>

Think your art is better or your stick figures worse? Got a link to a site you want to share? Post it here!

Moderators: Jacque, Moderators General, Prelates

User avatar
Intrepid
Posts: 37
Joined: Sat Apr 11, 2009 3:51 pm UTC
Location: Stony Brook, NY
Contact:

sketchbook/comic in HTML5 <canvas>

Postby Intrepid » Fri Nov 05, 2010 2:53 pm UTC

Over the summer I got an idea to start a webcomic, and decided to distribute it through HTML5's canvas element. Its basically a "comic in code" idea, though that's kinda already done with the svg comics. But anyway, while there's lots of canvas paint programs on the web, None of them particularly served my purpose to saving all the commands to redraw them later. So I had to build my tool from scratch, which I kinda gave up mid way. Only picked it back up last week and got a semi-working implementation. The drawing for these are sucky, because I could barely get used to my own interface.

Anyway without further a due check out http://www.lushed.net
~ not exactly sure if I should keep as a webcomic, I am actually not very good at being funny.

And here is a demo of the app/script I built for this purpose. Warning its quite buggy
http://www.lushed.net/demo

>> on second thought this idea is entirely stupid, because rendering can be time consuming, so until I can implement animation and beizure curves, its not really exploiting the canvas element to its full potential.
(^@^)

User avatar
Jacque
a member of shro's band
Posts: 870
Joined: Thu Apr 19, 2007 11:28 pm UTC
Location: Oakland, CA
Contact:

Re: sketchbook/comic in HTML5 <canvas>

Postby Jacque » Fri Nov 05, 2010 4:18 pm UTC

Not only is rendering time consuming (causing Safari to hang for some time on each page load), but the javascript files that one needs to download are HUGE. 3.8MB for "Pilot" alone.

User avatar
Intrepid
Posts: 37
Joined: Sat Apr 11, 2009 3:51 pm UTC
Location: Stony Brook, NY
Contact:

Re: sketchbook/comic in HTML5 <canvas>

Postby Intrepid » Fri Nov 05, 2010 4:39 pm UTC

yea. sorry. I've been trying to figure out little tweeks to optimize the code
(^@^)

User avatar
chridd
Has a vermicelli title
Posts: 839
Joined: Tue Aug 19, 2008 10:07 am UTC
Location: ...Earth, I guess?
Contact:

Re: sketchbook/comic in HTML5 <canvas>

Postby chridd » Sat Nov 06, 2010 7:02 am UTC

Why does it call stroke() after every lineTo when you use the pencil? I suspect that if you only called stroke (in the generated code) when the user lifted the mouse, that would work just as well, take up less space, and maybe even be faster.

Edit: I tried removing the excess stroke() calls in (a copy of) the page Jaque linked, and the page loads significantly faster (>2 minutes to <1 second). Adding beginPath() and a moveTo(wherever the previous line was) after each stroke() also speeds it up (though not as much as removing stroke() calls), confirming my suspicion that it was drawing most of the lines multiple times. The latter solution (adding beginPath) has the advantage that the code outputted can be exactly the same as the code used while drawing the first time (and actually give feedback while drawing), but the disadvantage that it increases the file size whereas the former solution decreases it.
~ chri d. d. /tʃɹɪ.di.di/ (Phonotactics, schmphonotactics) · she · Forum game scores
mittfh wrote:I wish this post was very quotable...


Return to “Your art and links”

Who is online

Users browsing this forum: No registered users and 5 guests