fillText over gradient background does not show - javascript

When I change from strokeText to fillText the text disappears. I just have a gradient canvas background and I am trying to put fillText over the gradient. strokeText works fine but when I change to fillText, the text is gone.
'''
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var grd = ctx.createRadialGradient(100, 100, 100, 100, 130, 50);
grd.addColorStop(0, "orange");
grd.addColorStop(1, "yellow");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 200, 100);
ctx.font="20px Georgia";
ctx.strokeText("hello",10,30);
'''
HTML
<canvas id="canvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

It “disappears” because you only set fillStyle once therefore both fillRect and fillText are the same gradient color. The text is there but it’s blended into the background. Change the fillStyle again before the text.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var grd = ctx.createRadialGradient(100, 100, 100, 100, 130, 50);
grd.addColorStop(0, "orange");
grd.addColorStop(1, "yellow");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 200, 100);
ctx.fillStyle = "blue";
ctx.font="20px Georgia";
ctx.fillText("hello",10,30);
The reason it doesn’t do that with stroke is because stroke doesn’t get it’s orders from fillStyle so therefore it uses the default which is black.

Related

Canvas - How to fill a square with two colors using createLinearGradient()?

I'm having problems making a square that has two colors in it. I found the functions createLinearGradient and addColorStop but it only fills the square with one color, which is blue.
How exactly do I fill this square properly? I'm having trouble understanding the parameters of the function it seems.
var c = canvas.getContext('2d'); // context object
var grad = c.createLinearGradient(0, 0, 0, 100);
grad.addColorStop(0, "red"); //
grad.addColorStop(1, "blue"); //
// Fill a square:
c.fillStyle = grad;
c.fillRect(100, 100, 100, 100);
fillStyles, like gradients and patterns are drawn relatively to the context's matrix, so your gradient is actually drawn above your rect:
var c = canvas.getContext('2d'); // context object
var grad = c.createLinearGradient(0, 0, 0, 100);
grad.addColorStop(0, "red"); //
grad.addColorStop(1, "blue"); //
c.fillStyle = grad;
// show the whole gradient
c.fillRect(0, 0, canvas.width, canvas.height);
// OP's square
c.strokeRect(100, 100, 100, 100);
<canvas id="canvas" height="300"></canvas>
To fix that you have two choices:
Set your gradients params correctly from the beginning:
var c = canvas.getContext('2d');
// move the y1 and y2 values by 100
var grad = c.createLinearGradient(0, 100, 0, 200);
grad.addColorStop(0, "red"); //
grad.addColorStop(1, "blue"); //
// Fill a square:
c.fillStyle = grad;
c.fillRect(100, 100, 100, 100);
<canvas id="canvas" height="300"></canvas>
Translate your context's matrix just before calling fill(). Indeed, path drawing and filling can be done on separate matrice.
var c = canvas.getContext('2d');
var grad = c.createLinearGradient(0, 0, 0, 100);
grad.addColorStop(0, "red"); //
grad.addColorStop(1, "blue"); //
c.fillStyle = grad;
// draw the path
c.rect(100, 100, 100, 100);
// change the filling matrix
c.translate(100, 100);
c.fill();
// reset the matrix
c.setTransform(1,0,0,1,0,0);
<canvas id="canvas" height="300"></canvas>
Your values for createLinearGradient were outside of the rectangle you were drawing in.
const canvas = document.getElementById('one');
const c = canvas.getContext('2d');
const grad = c.createLinearGradient(100, 100, 200, 200);
grad.addColorStop(0, "red");
grad.addColorStop(1, "blue");
c.fillStyle = grad;
c.fillRect(100, 100, 100, 100);
canvas {
outline: 1px solid black
}
<canvas id="one" width="300" height="300"></canvas>

canvas resolution not good

i am trying to draw a canvas line on div id "myCanvas" but problem is the line becomes very low resolution and its not shows smooth line. How can i increase that line resolution? And make it smooth line?
js:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
var grd = context.createLinearGradient(100, 150, canvas.width, canvas.height);
grd.addColorStop(0, '#0132bf');
grd.addColorStop(1, '#ccd9ff');
context.fillStyle = grd;
context.fill();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.lineTo(-10, 190);
context.bezierCurveTo(200, -100, 500, 200, 400, 150);
context.lineWidth = .9;
context.strokeStyle = '#ccd9ff';
context.stroke();
jsfiddle link
Try giving your canvas HTML element width and height attributes that fit your requirements, for example:
<canvas id="myCanvas" width="600" height="600">

Gradient map as opacity in a HTML5 canvas element?

Is there a way to create an opacity map on a canvas element
I am trying to fade a generated image as shown below.
EXAMPLE:
I don't believe there is any way to directly draw an image with a gradiant mask, but you could pre-draw the image to a separate canvas, and use globalCompositeOperation to draw a masking linear gradient, then draw that canvas using drawImage to the main canvas.
Working Example:
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
// Draw some background colors.
ctx.fillStyle = "#FF6666";
ctx.fillRect(0, 0, 150, 200);
ctx.fillStyle = "#6666FF";
ctx.fillRect(150, 0, 150, 200);
// Load the image.
img = new Image();
img.onload = function() {
// Create a canvas in memory and draw the image to it.
var icvs = document.createElement('canvas');
icvs.width = img.width;
icvs.height = img.height;
var ictx = icvs.getContext('2d');
ictx.drawImage(img, 0, 0);
// For masking.
ictx.globalCompositeOperation = 'destination-out';
// Draw the masking gradient.
var gradient = ictx.createLinearGradient(0, 0, 0, icvs.height);
gradient.addColorStop(0, "transparent");
gradient.addColorStop(1, "white");
ictx.fillStyle = gradient;
ictx.fillRect(0, 0, icvs.width, icvs.height);
// Draw the separate canvas to the main canvas.
ctx.drawImage(icvs, 25, 25, 250, 150);
};
img.src = '//i.stack.imgur.com/dR8i9.jpg';
<canvas id="cvs" width="300" height="200"></canvas>

color and overlap issues with canvas

Here is my html
<canvas class="row" id="myCanvas" width="500" height="50" style="border:1px solid #c3c3c3;" ></canvas>
and this is javascript
function showProgress() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillText("welcome", c.width/2, c.height/2);
ctx.textAlign = "center";
ctx.font = "30px Arial";
ctx.fillStyle = "#00ff00";
ctx.fillRect(0, 0, 270, 75);
}
showProgress();
I have following two issues.
1. Green fill rectangle is hiding the text. How can I show that text on top of fill color.
2. I would like text (welcome in this case) color to be red. Is there anyway of modifying just the text color.
code could be found at jsfiddle
https://jsfiddle.net/Lp24q01s/
function showProgress() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = "#00ff00";
ctx.fillRect(0, 0, 270, 75);
ctx.fillStyle = '#ff0000';
ctx.textAlign = "center";
ctx.font = "30px Arial";
ctx.fillText("welcome", c.width/2, c.height/2);
}
showProgress();
The canvas context uses the entire state to draw things and they're drawn in the order you call them. Want the text on top of a rectangle? Draw the rectangle first. Want to change the color? Set color to green, draw rectangle, set color to red, draw text.
It doesn't have a native way to say "the rectangle is green." It's more "the next thing you draw will have a fill style of green, I think I'll draw a rectangle" so you have a green rectangle.
function showProgress() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = "#00ff00";
ctx.fillRect(0, 0, 270, 75);
ctx.fillStyle = "#ff0000";// red text
ctx.fillText("welcome", c.width/2, c.height/2);
ctx.textAlign = "center";
ctx.font = "30px Arial";
}
showProgress();
you should put the fillText after the fillRect, also you need to set the fillStyle
because canvas is just a Finite State Machine, it can't remember what you was done.
if you make some difference state(such as change the fillStyle), and do another render(such as fillRect), the current result will always cover the result you done before.

Javascript canvas simple lightsource

I'm making a game with javascript canvas. I'm drawing all the game elements, like the player, blocks and lines, but I don't want you to see all that. Instead want the whole screen to be black, expect for in some places where there is lightsources. I don't need any shadows, just a circle on the screen that is lit up with a radial gradient. I am able to achieve this for one lightsource by adding a transparent gradient after I have drawn everything else, like this: (imagine the red rectangle to be all the things in the game)
//Drawing all the game elements
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 400, 300);
//adding the darkness and the lightsources
var grd = ctx.createRadialGradient(150, 100, 5, 150, 100, 100);
grd.addColorStop(0, "transparent");
grd.addColorStop(1, "black");
ctx.fillStyle = grd; ctx.fillRect(0, 0, 600, 400);
JSFiddle
But how can I achieve this with multiple lightsources? The technique showed won't work.
I have tried using the Illuminated.js api, but that was incredibly slow, and I don't need anything of the shadows and all that fancy stuff, just a circle where you can see the game.
Here's an example of my approach - create black&white mask and multiply the base with it:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//Drawing all the game elements
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 400, 300);
//adding the darkness and the lightsources
function addlight(ctx, x, y) {
var grd = ctx.createRadialGradient(x, y, 10, x, y, 150);
grd.addColorStop(0, "white");
grd.addColorStop(1, "transparent");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 600, 400);
}
var buffer = document.createElement('canvas');
buffer.width = 600;
buffer.height = 400;
b_ctx = buffer.getContext('2d');
b_ctx.fillStyle = "black";
b_ctx.fillRect(0, 0, 600, 400);
addlight(b_ctx, 150, 100);
addlight(b_ctx, 350, 200);
addlight(b_ctx, 450, 250);
ctx.globalCompositeOperation = "multiply";
ctx.drawImage(buffer, 0, 0);
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">

Categories