2

I know that the below code clears the canvas

canvas.width = canvas.width

But how does this work internally?

Assignment operator just assign some value to variable, but how does this above code clear the canvas?

As per JavaScript rules. Assignment operator works just to assign value to some variable.

But Is there any way to call some other function by just assigning value to variable?

Tushar Ahirrao
  • 10,773
  • 16
  • 61
  • 95
  • what do you mean by clearing canvas? Aren;t you supposed to use the `clearRect` methd ? – mohkhan Jul 08 '13 at 08:34
  • Possible duplicate of [How to clear the canvas for redrawing](http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing) (see the highest voted answer). – Frédéric Hamidi Jul 08 '13 at 08:34
  • @FrédéricHamidi my question is different dude. I want to how it works internally. I know my code clear canvas. Please read question carefully. – Tushar Ahirrao Jul 08 '13 at 08:36
  • 2
    @TusharAhirrao Works internally; In which JavaScript implementation? – jensgram Jul 08 '13 at 08:37
  • 2
    @Tushar, I did, and the highest voted answer in the duplicate does explain what happens internally when you reset the `width` property. – Frédéric Hamidi Jul 08 '13 at 08:38
  • @jensgram If you have any code. Please share how this works internally. How this simple assignments clear canvas – Tushar Ahirrao Jul 08 '13 at 08:39
  • Why are you so keen to know how it is implemented internally? You should keep in mind that clearing the screen this way, gives awful FPS in the client. – Eric Jul 08 '13 at 09:40
  • @Eric as per JavaScript rules. Assignment operator works just to assign value to some variable. but i want to know is there any way to call some other function by just assigning value to variable – Tushar Ahirrao Jul 08 '13 at 09:46
  • I think what you are looking for is `"operator overloading"`, which is not supported in JavaScript, unfortunately. You cannot "hook" the event of an variable being assigned. The only way I can think of, is to `trigger a custom-written event` upon assignment, and then listen for that one. – Eric Jul 08 '13 at 09:56
  • 1
    I believe that accessing .width will trigger reflowing of the element. As reflow involves change of element dimensions (usually) it require to recreate pixel buffer. Recreating pixel buffer can be faster than iterating through existing buffer and clearing its pixel data. Although modern browsers do clean as fast as this hack, and it will not involve extra GC time to collect and clear memory from old buffer. – moka Jul 08 '13 at 11:35

1 Answers1

5

When you set a new value some browser won't check if it is the same value as the old and just goes ahead and re-allocate a new bitmap (hence the clearing) internally (high-level languages may give the illusion that you can dynamically change a bitmaps size, but this is not the case. The old memory need to be released and then new allocated).

The right hand argument is "translated" into the value it holds by the JavaScript engine so it is delivered just as any other value.

However, this is not the recommended way to clear a canvas. It might work now in some browsers, but in the future it is not certain as this is not part of the specs.