In HTML5, I want to make a fillRect()
(with a white fill color) and a border
(black). I don't want to use strokeRect()
unless I can fill that later. I'm making a game where you click on squares and they change color (it's more complex than that but that's what this focuses on).
<canvas id="canvas1" width="400" height="300" style="border:1px solid #000000;"></canvas>
<script>
var c=document.getElementById("canvas1");
var ctx=c.getContext("2d");
ctx.strokeStyle="rgba(0,0,0,1)";
ctx.strokeRect(0,0,100,100);
</script>
The border around the canvas is for reference. I can use CSS too, but currently everything is in HTML.
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content. Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.
Adding Borders in Canvas Canvas allows you to add borders to an image directly inside Canvas using HTML code. When editing a page with an image, click on HTML Editor in the upper corner. Inside of the HTML code of the page, look for the <img> tag and add this code inside of it, before the src= section.
The fillRect() method allows you to draw a filled rectangle at (x,y) position with a specified with and height on a canvas. In this syntax: x is the x-axis coordinate of the starting point of the rectangle. y is the y-axis coordinate of the starting point of the rectangle.
strokeRect() method of the Canvas 2D API draws a rectangle that is stroked (outlined) according to the current strokeStyle and other context settings. This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it.
you can not fill it later without a library. If you want to change something simply redraw. You can use something like that:
ctx.fillStyle = 'blue';
ctx.strokeStyle = 'red';
var fillRect = false;
ctx.rect(20, 20, 150, 100);
if (fillRect) {
ctx.fill();
}
ctx.stroke();
it will draw only the border, if you change fillRect
to true
it will be filled. You can update your canvas on every requestAnimationFrame
.
But maybe you want to use a library like paper.js. It makes things like clicking on objects much easier and it abstracts draws on canvas to objects you create once and update later, like what you asked for.
Work out the position you want to draw the square with the width and height. Once you have done that simply draw a bigger square first which has wider by 2 and higher by 2 but with the same center point. So you draw a square which is bigger and then you draw the normal square on top, this then gives you the illusion of the square has a border
HTML
<canvas id="canvas1" width="400" height="300" style="border:1px solid #000000;"></canvas>
CSS
#canvas1{
border: solid 1px black;
}
Javascript
var c=document.getElementById("canvas1");
var ctx=c.getContext("2d");
var rectXPos = 50;
var rectYPos = 50;
var rectWidth = 100;
var rectHeight = 100;
drawBorder(rectXPos, rectYPos, rectWidth, rectHeight)
ctx.fillStyle='#FFF';
ctx.fillRect(rectXPos, rectYPos, rectWidth, rectHeight);
function drawBorder(xPos, yPos, width, height, thickness = 1)
{
ctx.fillStyle='#000';
ctx.fillRect(xPos - (thickness), yPos - (thickness), width + (thickness * 2), height + (thickness * 2));
}
jsfiddle link : https://jsfiddle.net/jxgw19sh/2/
-- Update --
Add an extra parameter to drawBorder
called thickness
the default value is 1 but you can provide any other number for thickness
into the function and it will use value instead of 1.
var x = 100;
var y = 100;
var width = 50;
var height = 50;
var borderWidth = 5;
var offset = borderWidth * 2;
c.beginPath();
c.fillStyle = 'black';
c.fillRect( x - borderWidth, y -borderWidth, width + offset, height + offset);
c.fillStyle = 'green';
c.fillRect( x, y, width, height);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With