I am trying to have a repeated background image with the text foreground but when I add pattern on canvas the text is not visible, here is me code:
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "https://cdn.pixabay.com/photo/2019/03/03/20/23/flowers-4032775__340.png";
img.height = 10;
img.onload = function(){
ctx.font = "30px Calibri";
ctx.fillText("DEXIE", 10, 50);
ctx.drawImage(img, 0, 0);
var ptrn = ctx.createPattern(img, 'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
Draw the text after drawing the pattern. Changing the fillStyle to what color you want the text to be.
canvas.width = innerWidth;
canvas.height = innerHeight;
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "https://cdn.pixabay.com/photo/2019/03/03/20/23/flowers-4032775__340.png";
img.onload = function(){
img.height = 10;
ctx.drawImage(img, 0, 0); // Do you really want to draw the image on the canvas????
var ptrn = ctx.createPattern(img, 'repeat');
// Draw pattern first
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw text on top
ctx.font = "30px Calibri";
ctx.fillStyle = "Black"; // <<== Set text color
ctx.fillText("DEXIE", 10, 50);
}
Related
I'm trying to do some pixel manipulation on a image texture of a loaded 3d model.
So I started drawing the image to canvas to get the image data, and re-apply that image to the model. But it seems it lost all its texture coordinates. How can I preserve them?
This is what I have:
let img = clothes.material.emissiveMap.image;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);
var new_image = new Image();
new_image.src = canvas.toDataURL();
clothes.material.emissiveMap.image = new_image;
clothes.material.emissiveMap.needsUpdate = true;
clothes.material.needsUpdate = true;
Original
Modified
Thank you for any suggestions
I suggest you use a slightly different workflow:
const img = clothes.material.emissiveMap.image;
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
clothes.material.emissiveMap.dispose();
clothes.material.emissiveMap = new THREE.CanvasTexture(canvas);
// copy texture parameters if necessary
It is not intended to change the image reference of an existing texture.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = 0;
var height = 0;
var diagonal = 0;
var image = new Image();
image.crossOrigin = 'Anonymous';
image.src = `source url`;
image.onload = () => {
width = image.naturalHeight;
height = image.naturalWidth;
diagonal = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
ctx.canvas.height = diagonal;
ctx.canvas.width = diagonal;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(diagonal / 2, diagonal / 2);
ctx.rotate((0 * Math.PI) / 180);
ctx.drawImage(image, -width / 2, -height / 2);
ctx.restore();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(diagonal / 2, diagonal / 2);
ctx.rotate((90 * Math.PI) / 180);
ctx.save();
canvas.height = image.height;
canvas.width = image.width;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
ctx.restore();
console.log(canvas.toDataURL("image/jpeg"))
};
<canvas id="canvas"></canvas>
I have an image of dimensions 1200x900. I want to rotate it by 90 degrees in clockwise and after rotation change its dimension again to 1200*900. How can I do this using canvas of HTML5.
I am attaching image here.
I want the destination image to be of size 1200x900. Please let me know, how to do this.
I don't see anywhere where you calculate the ratio between height & width...
We calculate that and use it in our drawImage to reduce the size.
...see sample below:
I keep the canvas size to the original image to show it in the background
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
image.onload = () => {
canvas.height = image.naturalHeight;
canvas.width = image.naturalWidth;
// original image
ctx.globalAlpha = 0.2;
ctx.drawImage(image, 0, 0);
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill()
// rotated image
ctx.save();
ctx.globalAlpha = 1;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 2);
let ratio = canvas.height/canvas.width
ctx.drawImage(image, -canvas.height / 2, -canvas.width / 2, canvas.width/ratio, canvas.width);
ctx.restore();
};
<canvas id="canvas"></canvas>
I was not sure what your diagonal calculation was needed for, so I just removed that and anything else not relevant... in future questions if you can explain your logic we can better respond to what/where your approach is going wrong
You can use same logic for other similar transformation...
here is another code sample:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
image.onload = () => {
canvas.height = canvas.width = Math.max(image.naturalWidth, image.naturalHeight);
// original image
ctx.globalAlpha = 0.2;
ctx.drawImage(image, 0, 0);
ctx.rect(0, 0, image.naturalWidth, image.naturalHeight);
ctx.fill()
// rotated image
ctx.save();
ctx.globalAlpha = 1;
ctx.translate(image.naturalHeight / 2, image.naturalWidth / 2);
ctx.rotate(Math.PI / 2);
ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
ctx.restore();
};
<canvas id="canvas"></canvas>
This is how I set in my code
createText(text = 'example') {
const canvas = document.createElement('canvas');
// canvas.width = 256;
// canvas.height = 64;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#796e8c';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font='120px Arial';
ctx.fillStyle = '#000000';
ctx.fillText(text, 0, 120);
const canvasTexture = new THREE.CanvasTexture(canvas);
const spriteMaterail = new THREE.SpriteMaterial({
map: canvasTexture,
color: 0xffffff
});
const sprite = new THREE.Sprite(spriteMaterail);
return sprite;
}
but the context is clipped
if I set canvas size like:
canvas.width = 256
canvas.width = 64
the result is like this:
i am trying to add add text (water mark) in canvas generated image
here is my code.
html2canvas($("#frame"), {
onrendered: function (canvas) {
$("#outputImage").html(canvas);
}
what i should add in this code to add watermark mark in generated image
Inside the handler do the following:
html2canvas($("#frame"), {
onrendered: function (canvas) {
var ctx = canvas.getContext("2d"); // get 2D context of canvas
ctx.textBaseline = "top"; // start with drawing text from top
ctx.font = "20px sans-serif"; // set a font and size
ctx.fillStyle = "red"; // set a color for the text
ctx.fillText("WATERMARK", 20, 20); // draw the text at some position (x, y)
$("#outputImage").html(canvas);
}
}
There is also alignment modes using:
ctx.textAlign = "center"; // default: "start" = left-to-right/right-to-left
// depending on language, override with "left" or "right"
Check out Canvas.globalCompositeOperation. If you set it to the string 'lighter', it will lighten the pixels drawn by the next drawing command (such as fillText()). Here's a sample
<canvas id='canvas'></canvas>
<script>
var img = new Image();
img.src = 'http://www.javascripture.com/pic.jpg';
img.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0, canvas.width, canvas.height);
// Draw the Watermark
context.font = '48px sans-serif';
context.globalCompositeOperation = 'lighter';
context.fillStyle = '#444';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('watermark', canvas.width / 2, canvas.height / 2);
};
</script>
I have a 3D scatter plot that I've constructed using Three.js. I would like to add an HTML5 canvas drawing to the scene, such that the drawing appears on a certain position of the page.
To better explain, here is a fiddle of the scatter plot:
http://jsfiddle.net/jmg157/ynFzw/6/
And let's say I wanted to add the below drawing to the bottom left (or right) of the page (which will eventually be a legend for the plot):
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(3, 3, 300, 200);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
context.font = "20px Verdana";
context.fillStyle = "#000";
context.fillText("Legend", 120, 25);
Thank you for any help/suggestions on how to go about doing this.
Here is a pattern you can follow:
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext('2d');
context.beginPath();
context.rect(3, 3, 150, 100);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
context.font = "20px Verdana";
context.fillStyle = "#000";
context.fillText("Legend", 40, 25);
canvas.style.position = 'absolute';
canvas.style.top = ( window.innerHeight - 100 - 10 ) + 'px';
canvas.style.left = '10px';
canvas.style.margin = '0px';
canvas.style.padding = '0px';
document.body.appendChild( canvas );
Your fiddle updated: http://jsfiddle.net/ynFzw/7/