[DOCS] Adds early draft of Canvas docs (#25395)

* [DOCS] Adds early draft of Canvas docs

* [DOCS] Added images and beta label to Canvas docs

docs/canvas.asciidoc

@@ -0,0 +1,27 @@
+[[canvas]]
+= Canvas
+
+[partintro]
+--
+
+beta[]
+
+Congratulations on finding the Canvas application in {kib}. You are in for a treat. 
+Canvas is a whole new way of making data look amazing. Canvas combines data with 
+colors, shapes, text, and your own imagination to bring dynamic, multi-page, 
+pixel-perfect, data displays to screens large and small. 
+
+We made Canvas for people like us. We figure, you are probably people like us: 
+you make neat stuff and you want to show that neat stuff to others. Canvas is 
+for makers who are a little bit creative, a little bit technical, and whole lot 
+of curious.
+
+We've put together <<canvas-getting-started, this Getting Started>> to teach you 
+how to get the most out of Canvas. 
+
+--
+
+include::canvas/canvas-getting-started.asciidoc[]
+
+include::canvas/canvas-workpad.asciidoc[]
+

docs/canvas/canvas-getting-started.asciidoc

@@ -0,0 +1,34 @@
+[[canvas-getting-started]]
+== Getting started with Canvas
+
+beta[]Getting started with Canvas is easy. Your best bet is to check out one 
+(or all) of the sample data sets that ship with {kib}. 
+
+. Click the {kib} logo in the upper left hand corner of your browser to navigate 
+to the {kib} home page.
+. Click *Load a data set and a Kibana dashboard*. This also loads a 
+Canvas workpad to go with the data set.
+. Pick a data set. Let’s go with the eCommerce one for this example. 
++  
+You might also click *Add* on all data sets why you’re here. You might want 
+some of that data for later.
+
+. Click the Canvas icon in the left hand navigation menu.
+. Find the *[eCommerce] Revenue Tracking* workpad and click on its name to open it.
+
+[role="screenshot"]
+image::images/canvas-ecommerce.png[]
+
+You’re in! The first thing to do is to make a copy of this 
+workpad so you can come back to it later if needed. We’ll be making a mess 
+of it in this tutorial. 
+
+. Click the name of the workpad in the lower left hand corner. 
++
+You’ll notice this is similar to the first screen. You could switch to a new 
+workpad from here, but let's not for now.
+
+. Click the *Clone* icon in the *[eCommerce] Revenue Tracking* row.
++
+You now have a new workpad called *[eCommerce] Revenue Tracking - Copy*.
+

docs/canvas/canvas-workpad.asciidoc

@@ -0,0 +1,49 @@
+[[canvas-workpad]]
+== Using the workpad
+
+beta[]You have a workpad you can mess with, so let’s mess with it. We’ll start 
+out easy and make a couple simple changes. 
+
+. Click the gauge chart in the top left of the workpad (fun fact, these are actually pie charts). 
+Try clicking the little red slice. If you click the number, you'll notice that
+you’ve actually selected a number element, not the gauge itself. 
++ 
+This element is now selected. Off to the right, you'll see that the side bar has changed. 
+This is where you can make changes to the element.
++
+[role="screenshot"]
+image::images/canvas_workpad_edit_style.png[]
+
+. Try changing the color palette. Easy right? Click the Back button in your 
+browser to undo your change.
+
+. Try dragging the chart around the page. Grab the resize handles to make 
+the chart bigger and smaller.
+
+. Now click somewhere off of the element, but not on another element, 
+to deselect it. 
++
+You will notice the sidebar changing again. You now have 
+access to the page and workpad-level settings. Feel free to change the page 
+background color or rename your workpad.
+
+Speaking of pages, Canvas workpads can have multiple pages.
+
+. Click the arrow to the right of the *Page 1 of 2* text in the toolbar at the bottom. 
+You'll see a whole new view of the the eCommerce data.
+. Click the *Page 2 of 2* text to see a live preview of all of the pages in your 
+workpad.
+. Click the (+) button to create a new, blank page.
+. Click the *Add element* button in the top right hand corner of the page.
+. Add an *Area Chart.*
++
+[role="screenshot"]
+image::images/canvas_workpad_3_page.png[]
+
+You should now have a three-page workpad wired, and a new element connected 
+to some demo data.  Your next step is to wire your new element 
+up to some real data.
+
+
+
+

docs/index.asciidoc

@@ -40,6 +40,8 @@ include::dashboard.asciidoc[]
 
 include::timelion.asciidoc[]
 
+include::canvas.asciidoc[]
+
 include::ml/index.asciidoc[]
 
 include::apm/index.asciidoc[]