Canvas lessons − How to create visible script on a webpage
How to create a canvas
Canvas
- I will download Sublime Text Editor for you for this Project
- if you need a copy for your home computer
- You will need to make a new file folder on your Desktop for Project files
- You will need to open the Sublime Text editor application
- When you open Sublime Text Editor it will be blank Click File option and save as and call it → canvas.html ←
- Line 1: <html>
- Line 2: <head></head>
- Line 3: <body>
- Line 4: <canvas style="background-color:pink;" width="800" height="800" id="myCanvas"></canvas>
- This code sets up a canvas for us to program to the canvas tag can be adjusted height and width, the id part sets the name of the canvas.
- Line 5: <script>
- Line 6: canvas = document.getElementById("myCanvas");
- this establishes a link from script to the canvas
- Line 7: ctx = canvas.getContext("2d");
- this gives a function variable call to draw things on the canvas
- Line 8: </script>
- Line 9: </body>
- Line 10: </html>
This is the basic setup the canvas for usage