Last post May 01, 2019 09:05 AM by Jenifer Jiang
Apr 30, 2019 05:13 PM|neoaguil17|LINK
I found the following example in canvas: https://codepen.io/falldowngoboone/pen/zxRXjL
I would like to create straight lines which can create borders in an image or create a rectangule around the image without center as:
Apr 30, 2019 07:58 PM|bruce (sqlwork.com)|LINK
straight lines are just rectangles.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 1); // horizontal 1 pixel line
ctx.fillRect(10, 10, 1, 100); // vertical 1 pixel line
you just use rotate() for an angle.
May 01, 2019 09:05 AM|Jenifer Jiang|LINK
According to your description, I suggest that you could just modify the style of canvas and you will achieve the requirement.
border: 1px solid red;
If adding the border style, the result is as your expected.