HTML5 Canvas - Hide text parts when it's out of my rectangle - javascript

My problem is simple. I just want to make invisible text parts when it's out of my rectangle. This image will help to understand what I want. How can I make invisible gray parts of text at canvas? Thanks for help!

After drawing your rectangle, invoke
ctx.clip();
Then draw the parts that should be only inside it.
Source

I would use ctx.globalCompositeOperation = "source-atop"
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 400;
let ch = canvas.height = 110;
ctx.fillStyle = "#ccc";
ctx.beginPath();
ctx.fillRect(100,25,200,60);
ctx.globalCompositeOperation = "source-atop"
ctx.font="2em Verdana";
ctx.fillStyle = "#f00";
ctx.fillText("This is some text",110,65);
canvas{border:1px solid;}
<canvas id="canvas"></canvas>

Related

Intersected semi-transparent stroke text

I have an issue with the painting context.stokeText that style contains an alpha. A big value of line width makes some effect of intersected strokes, as a result, the color is darker.
How I can avoid this?
ctx.strokeStyle ="rgba(0,0,0,0.3)";
ctx.lineWidth = 15;
ctx.lineJoin="round";
ctx.strokeText(text, x, y);
Image
That's a bit of an inconsistency in the specs since usually overlapping sub-pathes are painted only once.
However strokeText() does create one shape per glyph, and thus this method will indeed paint each glyphs on their own, creating this visible overlapping.
To overcome this, you'll to be a bit creative:
first draw your text fully opaque,
then redraw the produced pixels with the desired alpha level (many ways to do so).
draw that on your scene (or draw the background behind).
Here are a few ways (there are many others):
Probably the easiest, but which costs more memory: use a second disconnected canvas:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
// create a new canvas just for the text
const canvas2 = canvas.cloneNode();
const ctx2 = canvas2.getContext("2d");
ctx2.font = "60px sans-serif";
const text = "MY TEXT";
const x = canvas.width - ctx2.measureText(text).width - 20;
const y = canvas.height - 20;
// draw it fully opaque
ctx2.lineWidth = 15;
ctx2.lineJoin="round";
ctx2.strokeText(text, x, y);
// draw the background on the visible canvas
ctx.fillStyle = "#ffe97f";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// now draw our text canvas onto the visible one
// with the desired opacity
ctx.globalAlpha = 0.3;
ctx.drawImage(canvas2, 0, 0);
<canvas width="465" height="234"></canvas>
More memory friendly, but which requires you to rewrite your drawing logic in a different direction, use compositing:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "60px sans-serif";
const text = "MY TEXT";
const x = canvas.width - ctx.measureText(text).width - 20;
const y = canvas.height - 20;
// first draw the text fully opaque
ctx.lineWidth = 15;
ctx.lineJoin="round";
ctx.strokeText(text, x, y);
// now apply the opacity
ctx.fillStyle ="rgba(0,0,0,0.3)";
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// and the background
ctx.fillStyle = "#ffe97f";
ctx.globalCompositeOperation = "destination-over";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// if you want to keep drawing "normaly"
ctx.globalCompositeOperation = "source-over";
<canvas width="465" height="234"></canvas>
A mix of both, with different compositing rules:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "60px sans-serif";
const text = "MY TEXT";
const x = canvas.width - ctx.measureText(text).width - 20;
const y = canvas.height - 20;
// first draw the text fully opaque
ctx.lineWidth = 15;
ctx.lineJoin="round";
ctx.strokeText(text, x, y);
// now redraw over itself with the desired opacity
ctx.globalAlpha = 0.3;
ctx.globalCompositeOperation = "copy";
ctx.drawImage(canvas, 0, 0);
ctx.globalAlpha = 1;
// and the background
ctx.fillStyle = "#ffe97f";
ctx.globalCompositeOperation = "destination-over";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// if you want to keep drawing "normaly"
ctx.globalCompositeOperation = "source-over";
<canvas width="465" height="234"></canvas>

Trying to rotate image while keep aspect ratio of the picture

Basically what my project does is to fetch a picture from Database, place it into canvas, move it, zoom in and out, this this are working perfectly.
Next step is to rotate the picture and i have no idea what I am doing wrong. In the picture i described how my document looks like when the canvas is accessed. After I rotate the picture, it goes outside the canvas. My code looks like below and i have no idea what I am doing wrong. Thank you
function drawRotated(degrees) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(image.width*0.15,image.height*0.15);
ctx.rotate(degrees * Math.PI / 180);
ctx.translate(-image.width*0.15,-image.height*0.15);
ctx.drawImage(image, 0, 0, image.width*0.15, image.height*0.15);
}
Maybe this is not the answer you are expecting for. I didn't use your code. I hope it helps.
The main idea is to draw the image with the center in the origin of the canvas.
window.onload = function() {
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
var gkhead = gk;
gkhead.src = gk.src;
let w = gkhead.width;
let h = gkhead.height;
let x = -w/2;
let y = -h/2;
ctx.drawImage(gkhead,x,y,w,h);
function translateToThePoint(p){
ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(p.x,p.y);
ctx.scale(.25,.25);
ctx.drawImage(gkhead,x,y,w,h);
ctx.restore();
}
function rotate(angleInRad, p){
ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(p.x,p.y);
ctx.rotate(angleInRad);
ctx.scale(.25,.25);
ctx.drawImage(gkhead,x,y,w,h);
ctx.restore();
}
let p = {x:canvas.width/2,y:canvas.height/2}
//translateToThePoint(p);
rotate(-Math.PI/10,p);
}
canvas {
border:1px solid
}
<canvas id="canvas">
<img id="gk" src='https://www.warrenphotographic.co.uk/photography/cats/38088.jpg' />
</canvas>

pattern background text with canvas

How I can take value from a button and insert into a canvas to fill, for example if I press button T the box where is canvas will fill pattern with letter T entire box, I have an example but I don't want to copy the code I want to understand how it was made because I want to make something more advanced but I need to understand this first, here is the link example of feature.
For this I'm using 3 canvases. Two canvases are hidden but you don't need to attach them to the DOM. The logic is like this:
You have a first canvas (canvas1) where you draw the text from the <textarea>
You create a pattern using the canvas1: ctx2.fillStyle = ctx2.createPattern(canvas1,"repeat-x"); and you use it to fill a second canvas canvas2. This second canvas is twice as wide as the main canvas.
You use the canvas2 as a background image for the main canvas Here you may use a loop. I didn't.
let fontSize = 50;
const canvas = document.querySelector("canvas");
const canvas1 = document.createElement("canvas");
const canvas2 = document.createElement("canvas");
test.appendChild(canvas1);// you don't need to attach this to the DOM
test.appendChild(canvas2);// you don't need to attach this to the DOM
canvas.width = 500;
canvas.height = fontSize * 4;
canvas1.height = fontSize;
canvas2.height = fontSize;
canvas2.width = 2*canvas.width;
let ctx = canvas.getContext("2d");
let ctx1 = canvas1.getContext("2d");
let ctx2 = canvas2.getContext("2d");
ctx1.font = fontSize+"px 'Lucida Console', monospace";
theText.addEventListener("input",()=>{
ctx2.clearRect(0,0, canvas2.width, canvas2.height);
ctx.clearRect(0,0, canvas.width, canvas.height);
let _text = theText.value.toUpperCase();
let textLength = ctx1.measureText(_text).width;
canvas1.width = textLength || 1;// to avoid width 0 of the canvas
ctx1.font = fontSize+"px 'Lucida Console', monospace";
ctx1.fillStyle = "blue";
ctx1.textBaseline="middle";
ctx1.fillText(_text, 0, canvas1.height/2);
ctx2.fillStyle = ctx2.createPattern(canvas1,"repeat-x");
ctx2.fillRect(0,0, canvas2.width, canvas2.height);
ctx.drawImage( canvas2, 0, 0 );
ctx.drawImage( canvas2, -canvas2.width/2, fontSize );
ctx.drawImage( canvas2, canvas2.width/2, fontSize );
ctx.drawImage( canvas2, 0, 2*fontSize );
ctx.drawImage( canvas2, -canvas2.width/2, 3*fontSize );
ctx.drawImage( canvas2, canvas2.width/2, 3*fontSize );
})
canvas{border:1px solid;}
#test{display:none}
<canvas></canvas>
<textarea id="theText"></textarea>
<div id="test"></div>
In order to understand better what happens please delete #test{display:none} from the css. I hope this helps.

How to Style Images in a canvas?

I'm using node-canvas and I was wonder how style an imported image in canvas similar to how you would an image in CSS.
For example, how would I crop a square image in canvas to a circle. In CSS, all you need to do is set border radius to 50%.
Well obviously you cannot use CSS in this case since CSS is applied to the DOM and not the the pixel based content of a Canvas element.
However the Canvas element has its own set of draw functions which allow to you replicate or at least approximate CSS rules.
Since you mentioned cropping an image to a circle I'll focus on this example. To achieve this effect you want to specify a clipping region before drawing the image. Every pixel outside of the clipped region will not be drawn. Effectively this will crop the image to the clipped region.
In code:
// Retrieve canvas and get context
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// Save the context so we can undo the clipping region at a later time
context.save();
// Define the clipping region as an 360 degrees arc at point x and y
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
// Clip!
context.clip();
// Draw the image at imageX, imageY.
context.drawImage(image, imageX, imageY);
// Restore context to undo the clipping
context.restore();
I'd advice taking a look at this page to give you an idea of what you can do with the Canvas element and the 2D rendering context.
I don't know if this would work in node, However you can do this with canvas;
The simplest way of doing it is using, as you intended, border-radius:
canvas{border-radius:50%;}
An other way of doing it is by using the ctx.clip() method.
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(125,120,100,0,2*Math.PI);
// you clip the context
ctx.clip();
let img = document.querySelector("#testImg");
ctx.drawImage(img, 0, 20);
<canvas width="250" height="240" >
<img id="testImg" src="theImage.jpg">
</canvas>
Yet an other way of doing it is by using ctx.globalCompositeOperation = "destination-atop"in this way:
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 400,
cx = cw / 2;
let ch = canvas.height = 400,
cy = ch / 2;
ctx.globalCompositeOperation = "destination-atop";
let img = document.querySelector("#testImg");
ctx.drawImage(img, 0, 0);
ctx.beginPath();
ctx.fillStyle = "#f00";
ctx.arc(cx, cx, 100, 0, 2 * Math.PI);
ctx.fill();

JavaScript canvas make transparent image darker

I have an image I am drawing with ctx.drawImage, and it has transparency. I want to darken the image so I am using a fillRect with rgba(0,0,0,0.5) but this darkens the transparent parts of the image too. So I am looking into using ctx.globalCompositeOperation = 'destination atop' including using ctx.save and restore, but this now makes the entire canvas background white and only shows the background through the image/fillrect.
Before ctx.globalCompositeOperation = 'destination atop' or 'source-in':
After:
Here is my code:
/*above is drawing the background, I only want to merge the fillRect with the drawImage*/
ctx.save();
ctx.drawImage(o.image, x, y);
ctx.fillStyle = 'rgba(0,0,0,'+amount+')';
ctx.globalCompositeOperation = 'source-in';
ctx.fillRect(x, y, w, h);
ctx.globalCompositeOperation = 'source-over';
ctx.restore();
Not sure what you are after so just guessing.
Draw transparent image
ctx.globalCompositeOperation = "source-over"; // in case not set
ctx.drawImage(image,0,0);
Use "multiply" to darken image
ctx.globalCompositeOperation = "multiply"
ctx.fillStyle = "rgb(128,128,128)"; // dest pixels will darken by
// (128/255) * dest
ctx.fillRect(0,0,image.width,image.height)
Then to restore the alpha
ctx.globalCompositeOperation = "destination-in";
ctx.drawImage(image,0,0);
Then restore default comp state
ctx.globalCompositeOperation = "source-over";
An example of darkening and image. Image on left is darkened via method above. Right image is the original none darkened image. background colour is the colour under the canvas.
const ctx = canvas.getContext("2d");
// create an image to darken
const image = document.createElement("canvas");
image.width = 150;
const ctx1 = image.getContext("2d");
ctx1.beginPath()
ctx1.fillStyle = "#0F0";
ctx1.strokeStyle = "#FA0";
ctx1.lineWidth = 20;
ctx1.arc(75,75,50,0,Math.PI*2);
ctx1.fill();
ctx1.stroke();
ctx.globalCompositeOperation = "source-over"; // in case not set
ctx.drawImage(image,0,10);
ctx.globalCompositeOperation = "multiply"
ctx.fillStyle = "rgb(128,128,128)"; // dest pixels will darken by
// (128/255) * dest
ctx.fillRect(0,10,image.width,image.height)
ctx.globalCompositeOperation = "destination-in";
ctx.drawImage(image,0,10);
ctx.globalCompositeOperation = "source-over";
ctx.font = "16px arial";
ctx.fillStyle = "black";
ctx.fillText("Darkened image",10,14);
ctx.drawImage(image,150,10);
ctx.fillText("Original image",160,14);
canvas { border : 2px solid black; }
<canvas id="canvas"></canvas>
If you already have pixel content on the canvas you will need to use an offscreen canvas to darken the image and then use that image to draw to the canvas.
// create an image to hold darkened copy of image
const dImage - document.createElement("canvas");
dImage.width = image.width;
dImage.height - image.height;
const dctx = dImage.getContext("2d");
dctx.drawImage(image,0,0);
// apply darkening to dctx as shown in answer above.
ctx.drawImage(dImage,0,0); // draws darkened image on canvas

Categories