chore(api): Remove screenshots from EmbedLiveSample calls (#32588)

* chore(api): Remove screenshots from EmbedLiveSample calls

* chore(api): Remove screenshots from EmbedLiveSample calls

files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md

@@ -113,7 +113,7 @@ The script includes a function called `draw()`, which is executed once the page
 
 Here is how a template would look in action. As shown here, it is initially blank.
 
-{{EmbedLiveSample("A_skeleton_template", 160, 160)}}
+{{EmbedLiveSample("A_skeleton_template", "", "160")}}
 
 ## A simple example
 
@@ -149,6 +149,6 @@ To begin, let's take a look at a simple example that draws two intersecting rect
 
 This example looks like this:
 
-{{EmbedLiveSample("A_simple_example", 160, 160, "canvas_ex1.png")}}
+{{EmbedLiveSample("A_simple_example", "", "160")}}
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

files/en-us/web/api/canvas_api/tutorial/drawing_shapes/index.md

@@ -62,7 +62,7 @@ draw();
 
 This example's output is shown below.
 
-{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "canvas_rect.png")}}
+{{EmbedLiveSample("Rectangular_shape_example", "", "160")}}
 
 The `fillRect()` function draws a large black square 100 pixels on each side. The `clearRect()` function then erases a 60x60 pixel square from the center, and then `strokeRect()` is called to create a rectangular outline 50x50 pixels within the cleared square.
 
@@ -134,7 +134,7 @@ draw();
 
 The result looks like this:
 
-{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "triangle.png")}}
+{{EmbedLiveSample("Drawing_a_triangle", "", "110")}}
 
 ### Moving the pen
 
@@ -180,7 +180,7 @@ draw();
 
 The result looks like this:
 
-{{EmbedLiveSample("Moving_the_pen", 160, 160, "canvas_smiley.png")}}
+{{EmbedLiveSample("Moving_the_pen", "", "160")}}
 
 If you'd like to see the connecting lines, you can remove the lines that call `moveTo()`.
 
@@ -235,7 +235,7 @@ draw();
 
 This starts by calling `beginPath()` to start a new shape path. We then use the `moveTo()` method to move the starting point to the desired position. Below this, two lines are drawn which make up two sides of the triangle.
 
-{{EmbedLiveSample("Lines", 160, 160, "canvas_lineto.png")}}
+{{EmbedLiveSample("Lines", "", "160")}}
 
 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 `closePath()` for the stroked triangle, only two lines would have been drawn, not a complete triangle.
 
@@ -303,7 +303,7 @@ function draw() {
 draw();
 ```
 
-{{EmbedLiveSample("Arcs", 160, 210, "canvas_arc.png")}}
+{{EmbedLiveSample("Arcs", "", "210")}}
 
 ### Bezier and quadratic curves
 
@@ -359,7 +359,7 @@ function draw() {
 draw();
 ```
 
-{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "canvas_quadratic.png")}}
+{{EmbedLiveSample("Quadratic_Bezier_curves", "", "160")}}
 
 #### Cubic Bezier curves
 
@@ -397,7 +397,7 @@ function draw() {
 draw();
 ```
 
-{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "canvas_bezier.png")}}
+{{EmbedLiveSample("Cubic_Bezier_curves", "", "160")}}
 
 ### Rectangles
 
@@ -508,7 +508,7 @@ draw();
 
 The resulting image looks like this:
 
-{{EmbedLiveSample("Making_combinations", 160, 160, "combinations.png")}}
+{{EmbedLiveSample("Making_combinations", "", "160")}}
 
 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 `fillStyle` property on the drawing context, and the use of a utility function (in this case `roundedRect()`). 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.
 
@@ -553,7 +553,7 @@ function draw() {
 draw();
 ```
 
-{{EmbedLiveSample("Shapes_with_holes", 160, 160, "shape_with_hole.png")}}
+{{EmbedLiveSample("Shapes_with_holes", "", "160")}}
 
 In the example above the outer triangle goes clockwise (move to the top-left corner, then draw a line to the right-left corner, and finish at the bottom) and the inner triangle goes anticlockwise (move to the top, then line to the bottom-left corner, and finish at the bottom-right).
 
@@ -612,7 +612,7 @@ function draw() {
 draw();
 ```
 
-{{EmbedLiveSample("Path2D_example", 130, 110, "path2d.png")}}
+{{EmbedLiveSample("Path2D_example", "", "110")}}
 
 ### Using SVG paths
 

files/en-us/web/api/canvas_api/tutorial/using_images/index.md

@@ -152,7 +152,7 @@ draw();
 
 The resulting graph looks like this:
 
-{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "canvas_backdrop.png")}}
+{{EmbedLiveSample("Example_A_simple_line_graph", "", "160")}}
 
 ## Scaling
 
@@ -196,7 +196,7 @@ draw();
 
 The resulting canvas looks like this:
 
-{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "canvas_scale_image.png")}}
+{{EmbedLiveSample("Example_Tiling_an_image", "", "160")}}
 
 ## Slicing
 
@@ -255,7 +255,7 @@ draw();
 
 We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.
 
-{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "canvas_drawimage2.jpg")}}
+{{EmbedLiveSample("Example_Framing_an_image", "", "160")}}
 
 The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then use `drawImage()` to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second `drawImage()` call.
 

files/en-us/web/api/canvasrenderingcontext2d/arc/index.md

@@ -112,8 +112,7 @@ for (let i = 0; i <= 3; i++) {
 
 #### Result
 
-{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210,
-  "canvas_arc.png") }}
+{{EmbedLiveSample('Different_shapes_demonstrated', "", "210")}}
 
 ## Specifications
 

files/en-us/web/api/canvasrenderingcontext2d/fillstyle/index.md

@@ -79,8 +79,7 @@ for (let i = 0; i < 6; i++) {
 
 The result looks like this:
 
-{{EmbedLiveSample("Creating_multiple_fill_colors_using_loops", 160, 160,
-  "canvas_fillstyle.png")}}
+{{EmbedLiveSample("Creating_multiple_fill_colors_using_loops", "", "160")}}
 
 ## Specifications
 

files/en-us/web/api/canvasrenderingcontext2d/globalalpha/index.md

@@ -93,8 +93,7 @@ for (let i = 0; i < 7; i++) {
 }
 ```
 
-{{EmbedLiveSample("Overlaying_transparent_shapes", "180", "180",
-  "canvas_globalalpha.png")}}
+{{EmbedLiveSample("Overlaying_transparent_shapes", "", "180")}}
 
 ## Specifications
 

files/en-us/web/api/canvasrenderingcontext2d/linecap/index.md

@@ -99,8 +99,7 @@ ctx.strokeStyle = "black";
 });
 ```
 
-{{EmbedLiveSample("Comparison_of_line_caps", "180", "180",
-  "canvas_linecap.png")}}
+{{EmbedLiveSample("Comparison_of_line_caps", "180", "180")}}
 
 ## Specifications
 

files/en-us/web/api/canvasrenderingcontext2d/linejoin/index.md

@@ -99,8 +99,7 @@ ctx.lineWidth = 10;
 });
 ```
 
-{{EmbedLiveSample("Comparison_of_line_joins", "180", "180",
-  "canvas_linejoin.png")}}
+{{EmbedLiveSample("Comparison_of_line_joins", "", "180")}}
 
 ## Specifications
 

files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md

@@ -82,8 +82,7 @@ for (let i = 0; i < 6; i++) {
 
 The result looks like this:
 
-{{EmbedLiveSample("Creating_multiple_stroke_colors_using_loops", "180", "180",
-  "canvas_strokestyle.png")}}
+{{EmbedLiveSample("Creating_multiple_stroke_colors_using_loops", "", "180")}}
 
 ## Specifications
 

files/en-us/web/css/_doublecolon_-moz-list-number/index.md

@@ -41,7 +41,7 @@ li::-moz-list-number {
 
 ### Result
 
-{{ EmbedLiveSample("Examples", "auto", "auto", "moz-list-number.png") }}
+{{EmbedLiveSample("Examples")}}
 
 ## Specifications
 

files/en-us/web/svg/element/fecolormatrix/index.md

@@ -159,7 +159,7 @@ This element implements the {{domxref("SVGFEColorMatrixElement")}} interface.
 
 ### Result
 
-{{EmbedLiveSample("Example", "100%", 700, "/files/4371/test.png")}}
+{{EmbedLiveSample("Example", "100%", "700")}}
 
 ## Specifications
 

files/en-us/web/svg/element/fegaussianblur/index.md

@@ -47,7 +47,7 @@ This element implements the {{domxref("SVGFEGaussianBlurElement")}} interface.
 
 #### Result
 
-{{EmbedLiveSample("Simple_example",232,124,"/files/4227/feGaussianBlur.png")}}
+{{EmbedLiveSample("Simple_example", "", "130")}}
 
 ### Drop shadow example
 
@@ -74,7 +74,7 @@ This element implements the {{domxref("SVGFEGaussianBlurElement")}} interface.
 
 #### Result
 
-{{EmbedLiveSample("Drop_shadow_example",125,124,"/files/4229/feGaussianBlur-dropshadow.png")}}
+{{EmbedLiveSample("Drop_shadow_example", "", "130")}}
 
 ## Specifications