#522 ✓ checked-in
David Humphrey

Reduce calls to fillStyle, strokeStyle

Reported by David Humphrey | April 1st, 2010 @ 02:16 PM | in 0.9.4

There are a number of canvas operations that cost too much in terms of performance for us to call them any more than we have to in our code. One example of this is fillStyle and strokeStyle. In a number of places (e.g., point) we cache the current style, change it, draw a pixel or line, then restore it. This operation is incredibly expensive, accounting for 49% of some of my profiles on larger and more complex sketches that do heavy drawing in loops.

We should do all of the following:

  • Eliminate unnecessary calls to these setters
  • Cache these styles globally in p vs. doing temp vars in the functions, and do a boolean check to see if the colour has been changed (e.g., skip the calls whenever possible)
  • Stop using fillStyle and such all together. Could we switch to putImageData? What's the relative cost of doing it that way vs. having to cache/restore fillStyle?

Not sure if we can get this in for 0.8, but let's try.

Comments and changes to this ticket

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.

Shared Ticket Bins



Referenced by