Home/ Questions/Q 8024329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T22:50:20+00:00

I’m noticing that I have this line of code repeated in many different places

  • 0

I’m noticing that I have this line of code repeated in many different places in my code:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

First, I’m wondering the performance implications of this. For example, in my redrawing code which is called very often, I do that. Similarly, I may use JQuery to get a reference to the element.

I was wondering how big of a deal this was. I’m not exactly sure how to properly profile a website. I would like to somehow create a global reference to the context but when I try to do it in the global scope it doesn’t run. Is the only way to have a function that lazily returns a reference to the canvas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Stop doing it in your drawing code immediately. Stop doing anything like that in your drawing code.

    Save the context somewhere and pass the context in to your draw code (like in this five cent example I just made).

    “Touching” the DOM is slow. Slooow. Any way you slice it. Do it as little as possible. This subject is talked about in depth in High Performance JavaScript by Zakas.

    If you are concerned with JavaScript performance you should definitely give that title a look.

    • 0