Does HTML5 Canvas waste memory and CPU to render pixels that are off its window?
Suppose that we have the following three images that we want to render onto a 100 by 100 canvas:
+---------+-------+--------+-------+-------+--------------------+
| image | width | height | X | Y | Remark |
+---------+-------+--------+-------+-------+--------------------+
| 1.svg | 50 | 80 | 10 | 10 | Fits in |
+---------+-------+--------+-------+-------+--------------------+
| 2.svg | 200 | 180 | -30 | 10 | Partially Fits |
+---------+-------+--------+-------+-------+--------------------+
| 3.svg | 300 | 400 | 130 | 200 | Totally off canvas |
+---------+-------+--------+-------+-------+--------------------+
If we draw all the three images onto the canvas, is the native code intelligent enough not to waste resources drawing parts of 2.svg and the whole of 3.svg, or is it our responsibility to clip/skip these in a tile engine?