intro_canvas_nadiehb

forked from erikvangameren's block: fresh block

<!DOCTYPE html>

<body>
    <script>
        //Append a canvas element to the body
        let canvas = d3.select("body")
            .append("canvas")
            .attr("width", 1000)
            .attr("height", 700)
        //Get the 2D context from the canvas element
        let ctx = canvas.node().getContext("2d")
        ////////////// Draw a rectangle //////////////
        //Define the color to be used when something is filled
        ctx.fillStyle = "rgba(10,10,10,0.5)"
        //Draw a rectangle with x, y, width, height
        //x & y define the position of the top-left corner
        ctx.fillRect(100,20,100,100)
        //Draw another one that is a bit transparent
        ctx.fillStyle = "rgba(228, 31, 104, 0.5)"
        ctx.fillRect(50,50,150,150)
        //Create a rectangle that is stroked
        ctx.strokeStyle = "#e42068"
        ctx.lineWidth = 3
        ctx.strokeRect(30,80,100,100)
        ////////////// Draw some text //////////////
        //Define the font size and font family
        ctx.font = "20px Verdana"
        //Draw the font with text, start-x & start-y
        ctx.fillText("bibbidi bobbidi", 250, 100)
        //Adjust the font and create a stroked text
        ctx.font = "italic bold 50px Verdana"
        ctx.strokeText("boo", 250, 150)
        ////////////// Draw a circle //////////////
        //Adjust the fill style
        ctx.fillStyle = "#cc0000"
        //A circle is created with one of the "path" commands
        //Start any path with beginPath()
        ctx.beginPath()
        //Draw the circle with: center-x, center-y, radius, start angle, end-angle
        ctx.arc(500, 100, 50, 0, Math.PI)
        //Fill the path
        ctx.fill()
        //Close a path with closePath()
        ctx.closePath()
        ////////////// Draw a line //////////////
        ctx.beginPath()
        //Start drawing a line from the point x, y
        //In essence, move your pen to this point
        ctx.moveTo(600, 50)
        //Draw a line to this point with x, y
        ctx.lineTo(700, 150)
        //Stroke the path
        ctx.stroke()
        ctx.closePath()
        //You can use many CSS stylings too, such as stroke-linecap
        ctx.lineCap = "round"
        //or stroke-dasharray, you just need to search the canvas "words" for it
        ctx.setLineDash([5, 15])
        ctx.moveTo(650, 50)
        ctx.lineTo(750, 150)
        ctx.stroke()
        //Drawing multiple line segments creates a path
        ctx.beginPath()
        ctx.moveTo(700,50)
        ctx.quadraticCurveTo(150, 0, 250, 100)
        ctx.lineTo(900,150)
        ctx.lineTo(700,50)
        //You can fill it, or stroke it, or both
        ctx.fill()
        //ctx.stroke()
        ctx.closePath()
    </script>
</body>

https://d3js.org/d3.v4.min.js