MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

}
document.getElementById("r").style.fill = applyStyles ? "purple" : "";
document.getElementById("l").style.stroke = applyStyles ? "green" : "";
document.getElementById("c").style.fill = applyStyles ? "red" : "";
document.getElementById("t").style.fontStyle = applyStyles ? "normal" : "";
document.getElementById("t").style.textDecoration = applyStyles ? "underline" : "";
The other thing you might have noticed when the styles are applied is that the scaled-up canvas
looks rasterized, like a bitmap would typically be. This is expected behavior, as shown in the following
table of scaling characteristics. These are demonstrated in Scenarios 3 and 4 of the HTML Graphics
example.
Element Scaling Handling layout changes for best appearance
img rasterized Change src attribute for different scales (or just use an SVG file as a source).
canvas rasterized Redraw canvas using scaled dimensions; this is often best done by calling .scale
according to the needed display size instead of changing the coordinates used in the code.
svg smooth Not needed. Use viewBox and preseveAspectRatio for proportional scaling.
Additional Characteristics of Graphics Elements
There are a few additional characteristics to be aware of with graphics elements. First, different kinds of
operations will trigger a re-rendering of the element in the document. Second is the mode of operation
of each element. Third are the relative strengths of each element. These are summarized in the
following table:
Element Trigger for re-rendering Mode Strengths
img
Change src attribute
Change of styling via JavaScript
Pixel
Fast to render and transform
Great for static elements and static/repeating
backgrounds
Sprite animation by changing src attribute
Fine-grained dynamic content
Fast to render after being drawn
Pixel-level manipulation
Excellent for fine-grained dynamic/interactive
content with frequent computation
canvas
Calls to context API
Change of styling via JavaScript
Note: re-rendering happens only when
code returns control to the host and
unblocks the UI thread; there are no
visible changes while the code is
manipulating the canvas.
Change to element structure
Change of styling via JavaScript
Immediate: API calls are
rendered to pixels and
forgotten
svg
Retained: all shapes
exist as DOM elements
(unless used as img src)
Smooth scaling
Fine-grained control over individual (retained)
elements
Shape-level manipulation
Excellent for interactive graphics, detailed and
scalable styling, and dynamic per-shape attributes
411