Immediate drawing mode vs path drawing mode

Immediate drawing mode vs path drawing mode

IMMEDIATE MODE = EXECUTING A CALL TO A DRAWING METHOD MEANS IMMEDIATELY DRAWING IN THE CANVAS

 

PATH MODE = FILL A BUFFER THEN EXECUTE ALL BUFFERED ORDERS AT ONCE TO ENABLE OPTIMIZATION AND PARALLELISM

 

  1. for(var i=0; i < 1000; i++) {
  2.      var x = Math.random() * w;
  3.      var y = Math.random() * h;
  4.      var width = Math.random() * w;
  5.      var height = Math.random() * h;
  6.     ctx.rect(x, y, width, height); // store a rectangle in path/buffer
  7. }
  8. ctx.stroke(); // draws the whole buffer (the 1000 rectangles) at once

Path mode is faster than immediate mode!

RESET THE PATH MODE BUFFER

A call to ctx.beginPath() will reset the buffer (empty its contents). We will see many more examples of using the Path drawing mode in another section later on this week.

  1. // start a new buffer / path
  2. ctx.beginPath();
  3. // all these orders are in a buffer/path
  4. ctx.moveTo(10, 10);
  5. ctx.lineTo(100, 100);
  6. ctx.lineTo(150, 70);
  7. // Draw the buffer
  8. ctx.stroke();
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s