JSFiddle - React, Tailwind, and code Playground

HTML

<h1>how to draw a line in canvas by javascripy.</h1>

<canvas id="my" width="200" height="100" style=" border:1px solid #f00;">

</canvas>


Note:- here lineTo(200,300) means 200 is distance on x axis and 300 is distannce on y axis.

        move to (0,0,) move from left side, move from top side [ same linke margin left and margin top]

ctx: its mean context

JavaScript

var c = document.getElementById("my");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);