mdn · wbamberg · Jun 15, 2021 · Jun 15, 2021
@@ -65,7 +65,7 @@ <h3 id="A_fillStyle_example">A <code>fillStyle</code> example</h3>
 
 <p>The result looks like this:</p>
 
-<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}}</p>
 
 <h3 id="A_strokeStyle_example">A <code>strokeStyle</code> example</h3>
 
@@ -93,7 +93,7 @@ <h3 id="A_strokeStyle_example">A <code>strokeStyle</code> example</h3>
 
 <p>The result looks like this:</p>
 
-<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}</p>
 
 <h2 id="Transparency">Transparency</h2>
 
@@ -150,7 +150,7 @@ <h3 id="A_globalAlpha_example">A <code>globalAlpha</code> example</h3>
 <pre class="brush: js">draw();</pre>
 </div>
 
-<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}</p>
 
 <h3 id="An_example_using_rgba">An example using <code>rgba()</code></h3>
 
@@ -184,7 +184,7 @@ <h3 id="An_example_using_rgba">An example using <code>rgba()</code></h3>
 <pre class="brush: js">draw();</pre>
 </div>
 
-<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}}</p>
 
 <h2 id="Line_styles">Line styles</h2>
 
@@ -235,7 +235,7 @@ <h3 id="A_lineWidth_example">A <code>lineWidth</code> example</h3>
 <pre class="brush: js">draw();</pre>
 </div>
 
-<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
+<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}}</p>
 
 <p>Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.</p>
 
@@ -420,7 +420,7 @@ <h3 id="A_demo_of_the_miterLimit_property">A demo of the <code>miterLimit</code>
 draw();</pre>
 </div>
 
-<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
+<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}}</p>
 
 <h3 id="Using_line_dashes">Using line dashes</h3>
 
@@ -453,7 +453,7 @@ <h3 id="Using_line_dashes">Using line dashes</h3>
 
 march();</pre>
 
-<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p>
+<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}}</p>
 
 <h2 id="Gradients">Gradients</h2>
 
@@ -527,7 +527,7 @@ <h3 id="A_createLinearGradient_example">A <code>createLinearGradient</code> exam
 
 <p>In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.</p>
 
-<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
+<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}}</p>
 
 <h3 id="A_createRadialGradient_example">A <code>createRadialGradient</code> example</h3>
 
@@ -579,7 +579,7 @@ <h3 id="A_createRadialGradient_example">A <code>createRadialGradient</code> exam
 
 <p>The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient <code>#019F62 = rgba(1,159,98,1)</code>.</p>
 
-<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
+<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}}</p>
 
 
 <!-- ------------------------ -->
@@ -670,7 +670,7 @@ <h3 id="A_createPattern_example">A <code>createPattern</code> example</h3>
 
   // create new image object to use as pattern
   var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.src = 'canvas_createpattern.png';
   img.onload = function() {
 
     // create pattern
@@ -690,7 +690,7 @@ <h3 id="A_createPattern_example">A <code>createPattern</code> example</h3>
 <p>The result looks like this:</p>
 </div>
 
-<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
+<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}}</p>
 
 <h2 id="Shadows">Shadows</h2>
 
@@ -741,7 +741,7 @@ <h3 id="A_shadowed_text_example">A shadowed text example</h3>
 <pre class="brush: js">draw();</pre>
 </div>
 
-<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
+<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}}</p>
 
 <p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p>
 
@@ -772,6 +772,6 @@ <h2 id="Canvas_fill_rules">Canvas fill rules</h2>
 <pre class="brush: js">draw();</pre>
 </div>
 
-<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p>
+<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}}</p>
 
 <p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p>
@@ -67,7 +67,7 @@ <h3 id="Rectangular_shape_example">Rectangular shape example</h3>
 
 <p>This example's output is shown below.</p>
 
-<p>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+<p>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "canvas_rect.png")}}</p>
 
 <p>The <code>fillRect()</code> function draws a large black square 100 pixels on each side. The <code>clearRect()</code> function then erases a 60x60 pixel square from the center, and then <code>strokeRect()</code> is called to create a rectangular outline 50x50 pixels within the cleared square.</p>
 
@@ -139,7 +139,7 @@ <h3 id="Drawing_a_triangle">Drawing a triangle</h3>
 
 <p>The result looks like this:</p>
 
-<p>{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p>
+<p>{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "triangle.png")}}</p>
 
 <h3 id="Moving_the_pen">Moving the pen</h3>
 
@@ -183,7 +183,7 @@ <h3 id="Moving_the_pen">Moving the pen</h3>
 
 <p>The result looks like this:</p>
 
-<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "canvas_smiley.png")}}</p>
 
 <p>If you'd like to see the connecting lines, you can remove the lines that call <code>moveTo()</code>.</p>
 
@@ -238,7 +238,7 @@ <h3 id="Lines">Lines</h3>
 
 <p>This starts by calling <code>beginPath()</code> to start a new shape path. We then use the <code>moveTo()</code> method to move the starting point to the desired position. Below this, two lines are drawn which make up two sides of the triangle.</p>
 
-<p>{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+<p>{{EmbedLiveSample("Lines", 160, 160, "canvas_lineto.png")}}</p>
 
 <p>You'll notice the difference between the filled and stroked triangle. This is, as mentioned above, because shapes are automatically closed when a path is filled, but not when they are stroked. If we left out the <code>closePath()</code> for the stroked triangle, only two lines would have been drawn, not a complete triangle.</p>
 
@@ -308,7 +308,7 @@ <h3 id="Arcs">Arcs</h3>
 }
 </pre>
 
-<p>{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p>
+<p>{{EmbedLiveSample("Arcs", 160, 210, "canvas_arc.png")}}</p>
 
 <h3 id="Bezier_and_quadratic_curves">Bezier and quadratic curves</h3>
 
@@ -363,7 +363,7 @@ <h4 id="Quadratic_Bezier_curves">Quadratic Bezier curves</h4>
 }
 </pre>
 
-<p>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+<p>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "canvas_quadratic.png")}}</p>
 
 <h4 id="Cubic_Bezier_curves">Cubic Bezier curves</h4>
 
@@ -397,7 +397,7 @@ <h4 id="Cubic_Bezier_curves">Cubic Bezier curves</h4>
 }
 </pre>
 
-<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "canvas_bezier.png")}}</p>
 
 <h3 id="Rectangles">Rectangles</h3>
 
@@ -510,7 +510,7 @@ <h3 id="Making_combinations">Making combinations</h3>
 
 <p>The resulting image looks like this:</p>
 
-<p>{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p>
+<p>{{EmbedLiveSample("Making_combinations", 160, 160, "combinations.png")}}</p>
 
 <p>We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the <code>fillStyle</code> property on the drawing context, and the use of a utility function (in this case <code>roundedRect()</code>). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.</p>
 
@@ -569,7 +569,7 @@ <h3 id="Path2D_example">Path2D example</h3>
 }
 </pre>
 
-<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+<p>{{EmbedLiveSample("Path2D_example", 130, 110, "path2d.png")}}</p>
 
 <h3 id="Using_SVG_paths">Using SVG paths</h3>
 

@@ -72,7 +72,7 @@ <h3 id="A_save_and_restore_canvas_state_example">A <code>save</code> and <code>r
 
 <p>When the second <code>restore()</code> statement is called, the original state (the one we set up before the first call to <code>save</code>) is restored and the last rectangle is once again drawn in black.</p>
 
-<p>{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p>
+<p>{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "canvas_savestate.png")}}</p>
 
 <h2 id="Translating">Translating</h2>
 
@@ -111,7 +111,7 @@ <h3 id="A_translate_example">A <code>translate</code> example</h3>
 <pre class="brush: js">draw();</pre>
 </div>
 
-<p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p>
+<p>{{EmbedLiveSample("A_translate_example", "160", "160", "translate.png")}}</p>
 
 <h2 id="Rotating">Rotating</h2>
 
@@ -171,7 +171,7 @@ <h3 id="A_rotate_example">A <code>rotate</code> example</h3>
 <pre class="brush: js">draw();</pre>
 </div>
 
-<p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p>
+<p>{{EmbedLiveSample("A_rotate_example", "310", "210", "rotate.png")}}</p>
 
 <h2 id="Scaling">Scaling</h2>
 
@@ -213,7 +213,7 @@ <h3 id="A_scale_example">A <code>scale</code> example</h3>
 <pre class="brush: js">draw();</pre>
 </div>
 
-<p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p>
+<p>{{EmbedLiveSample("A_scale_example", "160", "160", "scale.png")}}</p>
 
 <h2 id="Transforms">Transforms</h2>
 
@@ -274,6 +274,6 @@ <h3 id="Example_for_transform_and_setTransform">Example for <code>transform</cod
 <pre class="brush: js">draw();</pre>
 </div>
 
-<p>{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p>
+<p>{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "canvas_transform.png")}}</p>
 
 <p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</p>
@@ -34,7 +34,7 @@ <h2 id="Examples">Examples</h2>
 <pre class="brush: css">button {
   display: inline-block;
   min-height: 100px; min-width: 100px;
-  background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua;
+  background: no-repeat 5% center url(magicwand.png) aqua;
 }</pre>
 
 <p>We get the element's style map. We then get() the background-image from the stylemap and stringify it:</p>

@@ -44,7 +44,7 @@ <h2 id="Examples">Examples</h2>
 const flippedMatrix = matrix.flipX();
 flipped.setAttribute('transform', flippedMatrix.toString());</pre>
 
-<p>{{ EmbedLiveSample('Examples', '100', '100', 'https://mdn.mozillademos.org/files/16556/flipX.png', 'Web/API/DOMMatrixReadOnly/flipX') }}</p>
+<p>{{ EmbedLiveSample('Examples', '100', '100', 'flipx.png', 'Web/API/DOMMatrixReadOnly/flipX') }}</p>
 
 <h2 id="Specifications">Specifications</h2>
 

@@ -116,7 +116,7 @@ <h2 id="Examples">Examples</h2>
 document.querySelector('#transformedOrigin').setAttribute('transform', scaledMatrixWithOrigin.toString());</pre>
 
 <p>{{ EmbedLiveSample('Examples', '250', '250',
-  'https://mdn.mozillademos.org/files/16524/Screen_Shot_2019-02-18_at_13.23.31.png',
+  'screen_shot_2019-02-18_at_13.23.31.png',
   'Web/API/DOMMatrixReadOnly/scale') }}</p>
 
 <h2 id="Specifications">Specifications</h2>

@@ -75,7 +75,7 @@ <h2 id="Examples">Examples</h2>
 </pre>
 
 <p>{{ EmbedLiveSample('Examples', '250', '250',
-  'https://mdn.mozillademos.org/files/16525/Screen_Shot_2019-02-19_at_11.20.40.png',
+  'screen_shot_2019-02-19_at_11.20.40.png',
   'Web/API/DOMMatrixReadOnly/translate') }}</p>
 
 <h2 id="Specifications">Specifications</h2>

@@ -39,7 +39,7 @@ <h3 id="Value">Value</h3>
   <code>height</code> (the total height of the screen in CSS pixels) minus the heights of
   the Dock and menu bar, as seen in the diagram below.</p>
 
-<p><a href="/en-US/docs/Web/API/Screen/availHeight/availheight-diagram.svg"><img
+<p><a href="availheight-diagram.svg"><img
       alt="Diagram showing how Screen.availHeight relates to Screen.height and the screen's contents"
       src="availheight-diagram.svg"></a></p>
 
@@ -65,7 +65,7 @@ <h2 id="Example">Example</h2>
 <p>The result is something similar to the below. Note the Panels window filling all
   available vertical space at the left of the screen.</p>
 
-<p><a href="https://mdn.mozillademos.org/files/15247/screen-availHeight.png"><img
+<p><a href="screen-availheight.png"><img
       alt="Screenshot of the example for Screen.availHeight"
       src="screen-availheight.png"></a></p>
 

@@ -59,7 +59,7 @@ <h2 id="Example">Example</h2>
 
 <p>The above prompt appears as follows (in Chrome on OS X):</p>
 
-<p><a href="https://mdn.mozillademos.org/files/11303/prompt.png"><img
+<p><a href="prompt.png"><img
       alt="prompt() dialog in Chrome on OS X"
       src="prompt.png"></a></p>
 

@@ -98,15 +98,15 @@ <h4 id="JS">JS</h4>
 }
 
 xhrButtonSuccess.addEventListener('click', () =&gt; {
-    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
+    runXHR('dgszyjnxcaipwzy.jpg');
 });
 
 xhrButtonError.addEventListener('click', () =&gt; {
     runXHR('https://somewhere.org/i-dont-exist');
 });
 
 xhrButtonAbort.addEventListener('click', () =&gt; {
-    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
+    runXHR('dgszyjnxcaipwzy.jpg').abort();
 });</pre>
 
 <h4 id="Result">Result</h4>

@@ -98,15 +98,15 @@ <h4 id="JS">JS</h4>
 }
 
 xhrButtonSuccess.addEventListener('click', () =&gt; {
-    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
+    runXHR('dgszyjnxcaipwzy.jpg');
 });
 
 xhrButtonError.addEventListener('click', () =&gt; {
     runXHR('https://somewhere.org/i-dont-exist');
 });
 
 xhrButtonAbort.addEventListener('click', () =&gt; {
-    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
+    runXHR('dgszyjnxcaipwzy.jpg').abort();
 });</pre>
 
 <h4 id="Result">Result</h4>