But rarely is this what you want, and it will burn you on performance. Whole Pixel CoordinatesĬanvas can draw to sub-pixel coordinates, meaning that it will anti-alias a rectangle that goes halfway into the next pixel so that it looks like it’s a little more on the border than you think. If you’re drawing lots of lines, rectangles, or other shapes, it makes a big performance difference to call the rect method a lot of times and fill once you’re done, rather than calling fillRect every time. The rect method doesn’t immediately draw anything: it records that you want to draw a rectangle in a certain place, and then when you draw fill or stroke, it draws that thing. Batch draw operationsįor an operation like rect, the Canvas API has two methods: rect and fillRect. Changing these properties and drawing with different styles is very expensive relative to drawing many things with the same style. Change style infrequentlyĬanvas keeps the shapes you draw separate from the style you use to draw it: the style is represented in properties like context.fillStyle, context.lineWidth, and context.font. These are a few assorted performance tricks that have a good return on investment. Performance Protipsĭrawing in Canvas is typically fast, but if you’re drawing many things or in realtime, a little optimization can go a long way. This can be an advantage: if you draw millions of circles into a Canvas, the millionth draws as quickly as the first. Canvas, on the other hand, takes your command to “draw a circle”, changes the pixels to show a circle, and immediately forgets about what is drawn. SVG remembers everything you draw: if you add a circle, then you can bind events to that circle, move it, or remove it. SVG is an example of a Retained mode interface, and Canvas is Immediate mode. Canvas vs SVGĬanvas is a very different system than SVG. If you want to handle high pixel densities in Canvas, you have to do it yourself by doubling the image size and halving its displayed size, like you would with an image tag. The Canvas API is a fundamentally raster way to interact with pixels: you can even interact with your drawings as pixels, using the getImageData and createImageData methods. moveTo, lineTo, bezierCurveTo, etc: lines. The Canvas API provides the means to draw several fundamental types: The MDN reference for CanvasRenderingContext2D is a good handbook to have at your side when you start interacting with these APIs. In a typical animation, I’ll use only a few methods, like fillRect, moveTo, beginPath, and others. Read Dive into Canvas for the first steps of interacting with a Canvas context. If you’re familiar with Canvas and just want animation protips, feel free to skip ahead. Animation is flashy and fun, but it’s not magic. With a few tricks, you can write animations for the three big output formats: the web, GIFs, and video. The 2D Canvas API is a fantastic tool for implementing animations of all kinds.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |