Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Canvas - fillRect() vs rect()

Tags:

In the code below, the second fillStyle overrides the color specified in first one if I use rect() and then fill() in both places (ie, both rects are green) but works as expected (ie, the first rect being blue and second being green) if I change the first rect() to fillRect(). Why is it so? I thought fillRect() was just rect() and then fill(), right?

ctx.translate(canvas.width/2, canvas.height/2);

ctx.fillStyle = "#5A9BDC";
ctx.fillRect(0, 0, rectWidth, rectHeight);
// ctx.rect(0, 0, rectWidth, rectHeight);
// ctx.fill();    

ctx.translate(-canvas.width/2, -canvas.height/2);

ctx.fillStyle = "#31B131";
ctx.rect(0, 0, rectWidth, rectHeight);
ctx.fill();

Tested in Chrome | Fiddle

like image 796
Sourabh Avatar asked Mar 21 '14 13:03

Sourabh


People also ask

What is fillRect in canvas?

fillRect() method of the Canvas 2D API draws a rectangle that is filled according to the current fillStyle . 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.

Which method in canvas is used to create a rectangle?

The rect() method creates a rectangle. Tip: Use the stroke() or the fill() method to actually draw the rectangle on the canvas.

What is JavaScript fillRect?

The fillRect() method draws a "filled" rectangle. The default color of the fill is black. Tip: Use the fillStyle property to set a color, gradient, or pattern used to fill the drawing. JavaScript syntax: context.fillRect(x,y,width,height);

How do you change the height and width of a canvas?

The width attribute specifies the width of the <canvas> element, in pixels. Tip: Use the height attribute to specify the height of the <canvas> element, in pixels. Tip: Each time the height or width of a canvas is re-set, the canvas content will be cleared (see example at bottom of page).


2 Answers

fillRect

.fillRect is a "stand-alone" command that draws and fills a rectangle.

So if you issue multiple .fillRect commands with multiple .fillStyle commands, each new rect will be filled with the preceeding fillstyle.

ctx.fillStyle="red";
ctx.fillRect(10,10,10,10);  // filled with red

ctx.fillStyle="green";
ctx.fillRect(20,20,10,10);  // filled with green

ctx.fillStyle="blue";
ctx.fillRect(30,30,10,10);  // filled with blue

rect

.rect is part of the canvas's path commands.

Path commands are groups of drawings beginning with the beginPath() and continuing until another beginPath() is issued.

Within each group, only the last styling command wins.

So if you issue multiple .rect commands and multiple .fillStyle commands inside a path, only the last .fillStyle will be used on all the .rect's.

ctx.beginPath();  // path commands must begin with beginPath

ctx.fillStyle="red";
ctx.rect(10,10,10,10);  // blue

ctx.fillStyle="green";
ctx.rect(20,20,10,10);  // blue

ctx.fillStyle="blue";  // this is the last fillStyle, so it "wins"
ctx.rect(30,30,10,10);  // blue

// only 1 fillStyle is allowed per beginPath, so the last blue style fills all

ctx.fill()
like image 179
markE Avatar answered Nov 06 '22 05:11

markE


As I know there are 3 "rect" functions for canvas: fillRect, strokeRect and rect.

ctx.rect(0,0,rectWidth,rectHeight); // create some shape, there is nothing on the canvas yet
ctx.stroke(); // draw stroke of the shape
ctx.fill();   // fill the shape

There are two shortcuts:

ctx.strokeRect(0,0,rectWidth,rectHeight); // shortcut to stroke rectangle
ctx.fillRect(0, 0, rectWidth, rectHeight); // shortcut to fill rectangle

So, your fill invocation could fill only your shape created with rect.

like image 21
Iaroslav Karandashev Avatar answered Nov 06 '22 05:11

Iaroslav Karandashev