I made a function on the canvas to cut an image and change its background color, but it does not change to the white color that I try to put
this was the code i made
const image = await createImage(imageSrc);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
return null;
}
ctx.fillStyle = 'white';
ctx.fill();
ctx.drawImage(image, 150, 200, 500, 300, 60,60, 500, 300);
return new Promise((resolve, reject) => {
canvas.toBlob((file) => {
file.name = 'cropped.jpeg';
resolve({ file: file, url: URL.createObjectURL(file) });
}, 'image/jpeg');
});
}```
I want to make the background of the image white, but it is always coming out black and does not change the color
ctx.fill() needs a path to fill. The quickest thing to do would be draw a rectangle the full size of the image, then run fill. You'll have to fill in the appropriate width/height for your image.
...
ctx.fillStyle = 'white';
ctx.rect(0, 0, width, height);
ctx.fill();
ctx.drawImage(image, 150, 200, 500, 300, 60,60, 500, 300);
...
Related
client.on('guildMemberAdd', async (member) => {
const channel = member.guild.channels.cache.find(
(channel) => channel.name === 'general'
);
if (!channel) return;
const canvas = Canvas.createCanvas(700, 250);
const ctx = canvas.getContext('2d');
const background = await Canvas.loadImage('./wallpaper.jpg');
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
ctx.strokeStyle = '#ffffff';
ctx.strokeRect(0, 0, canvas.width, canvas.height);
// Select the font size and type from one of the natively available fonts
ctx.font = '60px ArialCE.ttf';
// Select the style that will be used to fill the text in
ctx.fillStyle = '#ffffff';
// Actually fill the text with a solid color
ctx.fillText(member.displayName, canvas.width / 2.5, canvas.height / 1.8);
ctx.beginPath();
// Start the arc to form a circle
ctx.arc(125, 125, 100, 0, Math.PI * 2, true);
// Put the pen down
ctx.closePath();
// Clip off the region you drew on
ctx.clip();
const avatar = await Canvas.loadImage(
member.user.displayAvatarURL({ format: 'jpg' })
);
// Move the image downwards vertically and constrain its height to 200, so it's a square
ctx.drawImage(avatar, 25, 25, 200, 200);
const attachment = new Discord.MessageAttachment(
canvas.toBuffer(),
'welcome-image.png'
);
channel.send(`Welcome ${member.toString()} to the server!`, attachment);
});
I have been making a discord bot using discord.js. I wanted to make a canvas welcome message then when made it, it was working and all, except the words on the canvas. It was all like this:
and I searched a lot on google but couldn't find any solution.
The error I get is (Fontconfig error: Cannot load default config file).
I know it means that there are no fonts in my system but how to add them. I'm using repl.it.
It should work in node-canvas 2.0+. checkout new Canvas.registerFont method:
https://github.com/Automattic/node-canvas/#registerfont
To use a font file that is not installed as a system font, use registerFont() to register the font with Canvas. This must be done before the Canvas is created.
const { registerFont, createCanvas } = require('canvas')
registerFont('./fontFolder/comicsans.ttf', { family: 'Comic Sans' })
const canvas = createCanvas(500, 500)
const ctx = canvas.getContext('2d')
ctx.font = '12px "Comic Sans"'
ctx.fillText('Everyone hates this font :(', 250, 10)
Example:
TTF file will have a different font name. so only 'Roboto' here. otherwise it doesn't work.
registerFont('./fonts/Roboto-Medium.ttf', {family: 'Roboto'})
Don't define fontName as 'Medium 28px Roboto'. it won't work.
ctx.font = '12px Roboto Medium';
How I can specify a color for the background and text?
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext("2d");
ctx.font = "30px Impact";
ctx.fillText("Awesome!", 50, 100);
I just need to change fillStyle - it sets a color, then draw a background in color, then change color, then draw text:
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillRect(0, 0, 200, 200);
ctx.font = "30px Impact";
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fillText("Awesome!", 50, 100);
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>
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;">
I would like to obtain a radial gradient effect on an image (alpha = 1 in the middle and transparent on the edges).
Do you have any ideeas on how I could do that?
If I'm not mistaking what you want to do is:
Draw the image
Draw a radial gradient over it, where the borders are transparent and the middle is opaque and using the globalCompositeOperation setting on the context to blend the transparency gradient with the image.
You can rather easily translate this into code: http://jsfiddle.net/W8Ywp/1/.
var ctx = $('#cv').get(0).getContext('2d');
var img = new Image();
img.src = 'http://www.netstate.com/states/'
+ 'symb/flowers/images/oklahoma_rose.jpg';
img.onload = function() {
ctx.drawImage(img, 0, 0, 300, 300); // Draw image
// Create gradient, from middle to borders
var gradient = ctx.createRadialGradient(150, 150, 0,
150, 150, 150);
// Opaque white in the middle
gradient.addColorStop(0, 'rgba(255,255,255,0)');
// Transparent white at the borders
gradient.addColorStop(1, 'rgba(255,255,255,1)');
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300); // Fill rectangle over image with the gradient
};