I just started working with Javascript and the Canvas tag and was having a lot of fun with it till I hit this snag... Basically I have three different objects being drawn on the canvas. The back ground on big black rectangle, then two shapes a rectangle and text. I want them to be two different colors, and so I use fillstyle() before drawing each. the problem is the the browser seems to ignore every call to fillstyle() after the first and sticks with the first color I choose. I've tried with and with out the beginPath() closePath(), fill() statements it seems to work with or with out these so I'm not if sure if there required I had seen it used while I was researching this issue. I've tried using RGB values instead of the color names. No luck.
//background
context.fillStyle = "Black";
context.beginPath();
context.fillRect(0, 0, 500, 300);
context.closePath();
context.fill();
//text
context.fillStyle = "Red";
context.font = "20px Sans-Serif";
context.textBaseline = "top";
context.beginPath();
context.fillText ("TEXT", x, y );
context.closePath();
context.fill();
//Test block
context.fillstyle = "Green";
context.beginPath();
context.fillRect(0,0,30,20);
context.closePath();
context.fill();
It looks like you have an error with your test block:
context.fillstyle = "Green";
Should be
context.fillStyle = "Green";
Related
I have these 4 layers.
What I'm trying to do is put the red and blue layer into one mask. But I don't want the purple or orange layer to be affected by this mask (only the red and blue). I manage to make it work for the orange but not for the purple layer
See my code
var canvas = document.querySelector('canvas');
canvas.height = window.innerHeight
canvas.width = window.innerWidth
var ctx = canvas.getContext('2d');
//this should'nt be affected by the mask
ctx.beginPath()
ctx.fillStyle = 'purple';
ctx.rect(0, 50, 100, 100);
ctx.fill()
//this is the mask
ctx.beginPath()
ctx.rect(10, 10, 70, 70);
ctx.fillStyle = 'green';
ctx.fill()
ctx.globalCompositeOperation = 'source-atop';
//this need to be inside the mask
ctx.beginPath()
ctx.fillStyle = 'blue';
ctx.rect(10, 10, 100, 100);
ctx.fill()
//this need to be inside the mask
ctx.beginPath()
ctx.fillStyle = 'red';
ctx.rect(50, 40, 100, 100);
ctx.fill()
ctx.globalCompositeOperation = 'source-over'; //reset
//this should'nt be affected by the mask
ctx.beginPath()
ctx.fillStyle = 'orange';
ctx.rect(200, 40, 100, 100);
ctx.fill()
And the fiddle https://jsfiddle.net/ws3b4q95/4/
Canvas doesn't know about shapes as objects, it only cares about pixels. So the purple rectangle can't be excluded from your mask, because everyting that's already drawn on the canvas, will be part of the mask.
Instead you should draw the rectangle after you've applied the mask, and use destination-over operation:
//this need to be inside the mask
ctx.beginPath()
ctx.fillStyle = 'red';
ctx.rect(50, 40, 100, 100);
ctx.fill()
//this should'nt be affected by the mask
ctx.globalCompositeOperation = 'destination-over';
ctx.beginPath()
ctx.fillStyle = 'purple';
ctx.rect(0, 40, 100, 100);
ctx.fill()
This is nice summary from Mozilla about composite operations: MDN web docs: CanvasRenderingContext2D.global .CompositeOperation
Hi guys, I am working on an assignment where I need to draw an image of an emoticon face.
function sadFace() {
//Drawing the sad face
context.beginPath();
context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour
context.lineWidth = 3;
context.arc(300,300,200,0,Math.PI*4,true);
context.fill();
context.stroke();
//Left Eyebrow
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.rect(170,180,90,15);
context.fill();
context.stroke();
This is my current code. How can I rotate the 'eyebrow' of the image firstly, and also rotate the eyebrow without rotating the whole image? Thanks!
You can use affine transformation, like rotation, translation, scale.
First save the current context
context.save()
Set rotation and translation see document
Restore the state
context.restore()
const canvas = document.getElementById("canvas")
const context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour
context.lineWidth = 3;
context.arc(300,300,200,0,Math.PI*4,true);
context.fill();
context.stroke();
//Left Eyebrow
context.save();
context.translate(210, 188);
context.rotate(30 * Math.PI / 180);
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.rect(-45,-8,90,15);
context.fill();
context.stroke();
context.restore();
context.save();
context.translate(380, 188);
context.rotate(-30 * Math.PI / 180);
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.rect(-45,-8,90,15);
context.fill();
context.stroke();
context.restore();
<canvas id="canvas" width="500" height="500" />
Explanation:
Since rotating is rotate around the coordinator (O (0, 0), we need to translate first to the position we want to draw:
context.translate(eyeBrowX, eyeBrowY); // eyebrow position here
Then do a rotation:
context.rotate(angleInRadian);
Then draw the rectangle so that the center of the rectangle is O (0, 0) - then it would rotate around its center.
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.rect(-width / 2, -height / 2, width, height);
context.fill();
context.stroke();
You don't have to rotate anything. Instead of creating rect just use lines to draw the eyebrows. Tell the line to go get drawn in a diagonal path like this
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour
context.lineWidth = 3;
context.arc(300,300,200,0,Math.PI*4,true);
context.fill();
context.stroke();
//Left Eyebrow
context.beginPath();
context.moveTo(170,180);
context.lineTo(260,195);
context.lineWidth = 10
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.stroke();
<canvas id="myCanvas" width="800" height="800"></canvas>
In this way you don't need to save the context. By the way the canvas does not allow you to change things individually. You need to clear and redraw. (that how it works for animations for example). If you want more control, and modify things individually you need a rendering library like Pixi.js
I have used fillstyle in javascript and i want multiple color snowballs in it, how can i use it? I have tried using multiple functions and also multiple canvas but not able to do it, please help
Hard to tell without code but I will guess that you are not using ctx.beginPath() each time you want to draw a different colour.
var ctx = can.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(Math.random()*100+10,Math.random()*100+10,10,0,Math.PI*2);
ctx.fill();
ctx.fillStyle = "green";
ctx.beginPath(); // start a new path
ctx.arc(Math.random()*100+10,Math.random()*100+10,10,0,Math.PI*2);
ctx.fill();
ctx.fillStyle = "blue";
ctx.beginPath(); // start a new path
ctx.arc(Math.random()*100+10,Math.random()*100+10,10,0,Math.PI*2);
ctx.fill();
<canvas id="can"></canvas>
I need is some way to draw a shape in html. I've tried searching around, but I haven't found anything related.
Here is a sketch of what I need.
I need to draw shape in red. I know how to draw the dots, but I don't know how to connect them, because the red dots can move. The blue dots mark where the red dots can go.
You could use a canvas. Here’s how you could draw a triangle:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(50, 100);
ctx.closePath();
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke();
<canvas id="canvas" width="150" height="150">Your browser lacks canvas support.</canvas>
I’ll leave it to you to figure out how to draw a diamond and make it red.
I'm unable to get the text on the canvas. What am I doing wrong here ?
JSFiddle - http://jsfiddle.net/qHpt6/
var el = document.getElementById('mycanvas');
var context = el.getContext('2d');
context.globalAlpha = 0.95;
context.beginPath();
context.rect(0, 0, el.width, el.height);
context.fillStyle = "#435a6b";
context.fillText('Hello World',0,0);
context.fill();
You're trying to draw 40 point text into a little teeny box. Make the box bigger or the text a lot smaller.
You're also drawing the text at the upper left corner of the box. The text goes up from the baseline.
If you change the box size to something like 350 wide and 250 high, and change the code to
context.fillText("Hello World", 0, 200);
then you'll see the text.
Forked and fixed fiddle.
There is multiple issues:
The canvas is too small too correctly draw the text.
The text has the same fillStyle as the rectangle, so one cannot see it.
You draw the rectangle after the text, so the text is covered.
You may try this code:
context.globalAlpha = 0.95;
context.rect(0, 0, el.width, el.height);
context.fillStyle = "#435a6b";
context.fill();
context.font = 'italic 40pt Calibri';
context.fillStyle = "black";
context.fillText('Hello World',50,50);
http://jsfiddle.net/qHpt6/