Question

I am simulating a page turn effect in html5 canvas.

On each page I am drawing lines to simulate lined paper.

These lines are drawn as the page is turned and in order to give natural perspective I am drawing them using quadratic curves based of several factors (page turn progress, closeness to the center of the page etc.. etc…)

The effect is very natural and looks great but I am looking for ways to optimize this.

Currently I am drawing every line twice, once for the actual line and once for a tiny highlight 1px below this line. I am doing this like so:

// render lines (shadows)

          self.context.lineWidth = 0.35;

          var midpage = (self.PAGE_HEIGHT)/2;

          self.context.strokeStyle = 'rgba(0,0,0,1)';
          self.context.beginPath();

          for(i=3; i < 21; i++){
             var lineX = (self.PAGE_HEIGHT/22)*i;
             var curveX = (midpage - lineX) / (self.PAGE_HEIGHT);
             self.context.moveTo(foldX, lineX);                                       
             self.context.quadraticCurveTo(foldX, lineX + ((-verticalOutdent*4) * curveX), foldX - foldWidth - Math.abs(offset.x), lineX + ((-verticalOutdent*2) * curveX));

          }
          self.context.stroke();

 // render lines (highlights)
         self.context.strokeStyle = 'rgba(255,255,255,0.5)';
         self.context.beginPath();

         for(i=3; i < 21; i++){
              var lineX = (self.PAGE_HEIGHT/22)*i;
              var curveX = (midpage - lineX) / (self.PAGE_HEIGHT);
              self.context.moveTo(foldX, lineX+2);                                       
              self.context.quadraticCurveTo(foldX, lineX + ((-verticalOutdent*4) * curveX) + 1, foldX - foldWidth - Math.abs(offset.x), lineX + ((-verticalOutdent*2) * curveX) + 1);                                          
         }
         self.context.stroke();

As you can see I am opening a path, looping through each line, then drawing the path. Then I repeat the whole process for the ‘highlight’ lines.

Is there any way to combine both of these operations into a single loop without drawing each line individually within the loop which would actually be far more expensive?

This is a micro-optimization, I am well aware of this. However this project is a personal exercise for me in order to learn html5 canvas performance best practices/optimizations.

Thanks in advance for any suggestions/comments

Answer 1

Paths can be stroked as many times as you like, they’re not cleared when you call .stroke(), so:

1. create your path (as above)
2. .stroke() it
3. translate the context
4. change the colours
5. .stroke() it again

EDIT tried this myself – it didn’t work – the second copy of the path didn’t notice the translation of the coordinate space 🙁

It apparently would work if the path was created using new Path() as documented in the (draft) specification instead of the “current default path” but that doesn’t appear to be supported in Chrome yet.