[DOCS] Updates Canvas images for 7.14 (#106424)

* [DOCS] Updates Canvas images for 7.14

* Fixes refresh image size

docs/canvas/canvas-edit-workpads.asciidoc

@@ -12,6 +12,7 @@ When you frequently use copy and paste, create variables to easily reuse strings
 each element instead of updating them manually.
 
 . Create the variables.
+.. Expand the *Variables* options.
 .. Click *Add a variable*. 
 .. Specify the variable options, then click *Save changes*.
 
@@ -25,12 +26,12 @@ For example, to change the index pattern for a set of charts:
 . Specify the variable options.
 +
 [role="screenshot"]
-image::images/specify_variable_syntax.png[Image describing how to specify the variable syntax]
+image::images/specify_variable_syntax.png[Variable syntax options]
 +
 . Copy the variable, then apply it to each element you want to update in the *Expression editor*.
 +
 [role="screenshot"]
-image::images/copy_variable_syntax.png[Image demonstrating expression editor]
+image::images/copy_variable_syntax.png[Copied variable syntax pasted in the Expression editor]
 
 [float]
 [[apply-changes-to-the-entire-workpad]]
@@ -84,9 +85,6 @@ To use an element with the same functionality and appearance in multiple places,
 
 Select the element, then click *Edit > Clone*. 
 
-[role="screenshot"]
-image::images/clone_element.gif[Image showing how to clone elements]
-
 [float]
 [[move-and-resize-elements]]
 ==== Move and resize elements

docs/canvas/canvas-present-workpad.asciidoc

@@ -9,16 +9,10 @@ When you are ready to present your workpad, use and enable the presentation opti
 .. From the workpad menu, click *View > Autoplay settings*.
 
 .. Under *Change cycling interval*, select the interval you want to use, or *Set a custom interval*.
-+
-[role="screenshot"]
-image::images/canvas-autoplay-interval.png[Element autoplay interval]
 
 . To enable autoplay, click *View > Turn autoplay on*.
 
 . To start your presentation, click *View > Enter fullscreen mode*.
-+
-[role="screenshot"]
-image::images/canvas-fullscreen.png[Image showing how to enter fullscreen mode from view dropdown]
 
 . When you are ready to exit fullscreen mode, press Esc.
 
@@ -31,9 +25,6 @@ To get a closer look at a portion of your workpad, use the zoom options.
 . Click *View > Zoom*.
 
 . Select the zoom option.
-+
-[role="screenshot"]
-image::images/canvas-zoom-controls.png[Zoom controls, also in view dropdown]
 
 [float]
 [[configure-auto-refresh-interval]]
@@ -45,7 +36,4 @@ Change how often the data refreshes on your workpad.
 
 . Select the interval you want to use, or *Set a custom interval*.
 +
-[role="screenshot"]
-image::images/canvas-refresh-interval.png[Element data refresh interval]
-+
 To manually refresh the data, click image:canvas/images/canvas-refresh-data.png[Canvas refresh data button].

docs/canvas/canvas-tutorial.asciidoc

@@ -9,9 +9,9 @@ To familiarize yourself with *Canvas*, add the Sample eCommerce orders data, the
 
 To create a workpad of the eCommerce store data, add the data set, then create the workpad.
 
-. On the {kib} *Home* page, click *Try our sample data*.
+. Go to the {kib} *Home* page, then click *Try our sample data*.
 
-. From *Sample eCommerce orders data*, click *Add data*.
+. On the *Sample eCommerce orders data* card, click *Add data*.
 
 . Open the main menu, then click *Canvas*.
 
@@ -26,8 +26,8 @@ To customize your workpad to look the way you want, add your own images.
 +
 The default Elastic logo image appears on the page.
 
-. To replace the Elastic logo with your own image, select the image, then use the editor.
-
+. To add your own image, click the Elastic logo, then drag the image file to the *Select or drag and drop an image* field.
++
 [role="screenshot"]
 image::images/canvas-image-element.png[Image showing how to add the image element]
 

docs/user/canvas.asciidoc

@@ -67,9 +67,6 @@ To use the background colors, images, and data of your choice, start with a blan
 .. In the *Width* and *Height* fields, specify the size, or select one of default layouts. 
 
 .. Click the *Background* color picker, then select the color for your workpad.
-+
-[role="screenshot"]
-image::images/canvas-background-color-picker.png[Canvas color picker]
 
 [float]
 [[create-workpads-from-templates]]
@@ -133,9 +130,6 @@ Each element can display a different data source, and pages and workpads often c
 . To save, use the following options:
 
 * To save a single element, select the element, then click *Edit > Save as new element*.
-+
-[role="screenshot"]
-image::images/canvas_save_element.png[]
 
 * To save a group of elements, press and hold Shift, select the elements you want to save, then click *Edit > Save as new element*.
 
@@ -150,9 +144,6 @@ Add a panel that you saved in *Visualize Library* to your workpad.
 . Click *Add element > Add from {kib}*.
 
 . Select the panel you want to add.
-+
-[role="screenshot"]
-image::images/canvas-map-embed.gif[]
 
 . To use the customization options, open the panel menu, then select one of the following options:
 
@@ -177,9 +168,6 @@ To personalize your workpad, add your own logos and graphics.
 . On the *Manage workpad assets* window, drag and drop your images.
 
 . To add the image to the workpad, click the *Create image element* icon.
-+
-[role="screenshot"]
-image::images/canvas-add-image.gif[Add image to Canvas]
 
 [float]
 [[add-more-pages]]