So I'm trying to make this canvas have different types of text on it including colours. Here what I have so far.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="200" style=" border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "40pt Calibri";
context.fillText("My TEXT!", 50, 100);
};
imageObj.src = "Assets/Background2.png";
};
</script>
</body>
</html>
You just need to use the fillStyle method each time you want to change your font color:
context.fillStyle = 'red';
Use fillStyle before fillText
Check this Fiddle
Related
I am trying to create and fill a canvas as blue without using any html. I have been successful in rendering an empty canvas. The issue occurs when I try to fill the canvas with a color as seen below in the second code snippet. In the two snippets below, the only difference is which canvas is filled with blue (document.getElementsByClassName("blueCanvas")[0] in the first one, which works, and document.getElementsByClassName("blueCanvas")[2], which should fill the dynamically created canvas, and fails.
some things I have tried/noticed:
First I thought it was an issue with the order in the execution in the creation of the canvas and the js that tries to fill it, but the problem persists even when I create the canvas in the beginning of the <body>. I also thought it might be an issue of append the element to the DOM but it renders an empty canvas so I don't see how that's possible.
Thanks.
var newCanvas = document.createElement('canvas');
newCanvas.width = '300';
newCanvas.height = '150'
newCanvas.className = 'blueCanvas';
newCanvas.style = 'border:1px solid black'
newCanvas.innerHTML = '<canvas> </canvas>';
document.body.appendChild(newCanvas);
var canvas = document.getElementsByClassName("blueCanvas")[0];
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
var newCanvas = document.createElement('canvas');
newCanvas.width = '300';
newCanvas.height = '150'
newCanvas.className='blueCanvas';
newCanvas.style= 'border:1px solid black'
newCanvas.innerHTML = '<canvas> </canvas>';
document.body.appendChild(newCanvas);
var canvas = document.getElementsByClassName("blueCanvas")[2];
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
Since I know you read my comments:
function blueCanvas(){
let canvas = document.createElement('canvas'), style = canvas.style, ctx;
canvas.width = 300; canvas.height = 150; canvas.className = 'blueCanvas';
style.border = '1px solid black'; ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue'; ctx.fillRect(0, 0, 300, 150);
document.body.appendChild(canvas);
}
blueCanvas();
Its not clear what you want.
Maybe this will help
const canvas = document.createElement('canvas');
canvas.width = 400; // size it
canvas.height = 300;
canvas.className = 'blueCanvas'; // assign class name
document.body.appendChild(canvas); // add to document
// get context
const ctx = canvas.getContext("2d");
// fill it with blue
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.font = "32px Arial";
ctx.textAlign = "center";
ctx.fillText("Dynamically added canvas", 200, 100);
I wanted to know how do I put text on top of the image which is in the canvas. The image needs to be in the canvas since it is part of my game (Breakout). I get some text but it goes behind the image which is annoying.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Breakout</title>
</head>
<body bgcolor="#4d0000">
<p align="center">
<canvas id="canvas" width="1500" height="800" style="border:1px solid #d3d3d3;"></canvas>
</p>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "40pt Calibri";
context.fillText("BREAKOUT", 625, 100);
};
imageObj.src = 'C:/Users/study/Desktop/Breakout/Images/test3.jpg';
};
</script>
</body>
</html>
There is no problem with the code you tried, it is not visible in the canvas because of the position of the text context.fillText("BREAKOUT", 625, 100);
So, just change the position of the text or increase the image size
This helps you Simulation background-size: cover in canvas
Now you can have your text wherever possible!
<!DOCTYPE html>
<html>
<head>
<title>Breakout</title>
</head>
<body bgcolor="#4d0000">
<p align="center">
<canvas id="canvas" width="1500" height="800" style="border:1px solid #d3d3d3;"></canvas>
</p>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "40pt Calibri";
context.fillText("BREAKOUT", 20, 80, imageObj.width*2, imageObj.height * 2);
};
imageObj.src = 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350';
};
</script>
</body>
</html>
Edit
Debug yourself whether the text is displaying before the image is loaded?
So, if you have tried something like this
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = "40pt Calibri";
context.fillText("BREAKOUT", 620, 100);
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'C:/Users/study/Desktop/Breakout/Images/test3.jpg';
};
The text won't be displayed! so just change the text position to something like context.fillText("BREAKOUT", 20, 80); and see, the text appears. So There is no problem with the code you have written.
Hope you got the answer to the question.
Thank you.
I want to draw a circle inside another circle and then add text inside the new (small) circle (for example an alphabet).
I got the following so for far, any advice?
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle ="red";
ctx.fill();
var dd = document.getElementById("myCanvas");
var ddtx = dd.getContext("2d");
ddtx.beginPath();
ddtx.arc (96,50,35,2*Math.PI,1.99*Math.PI);
ddtx.stroke();
ddtx.fillStyle ="blue";
ddtx.fill();
var d = document.getElementById("myCanvas");
var dtx = d.getContext("2d");
dtx.beginPath();
dtx.arc(95,50,10,2*Math.PI,1.9*Math.PI);
dtx.stroke();
dtx.fillStyle = "white";
dtx.fill();
</script>
</body>
</html>
You can use the context text functions as follows :
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle ="red";
ctx.fill();
var d = document.getElementById("myCanvas");
var dtx = d.getContext("2d");
dtx.beginPath();
dtx.arc(95,50,10,2*Math.PI,1.9*Math.PI);
dtx.stroke();
dtx.fillStyle = "white";
dtx.fill();
dtx.fillStyle = "black"; // font color to write the text with
var font = "bold 13px serif";
dtx.font = font; // specify the font
dtx.textBaseline = "top"; // set the baseline as top
dtx.fillText("A", 90 ,43); // render the text with its x and y coordinates
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
I am trying to make a preview checkout, where you can preview an item, with custom text over the image, but I can't even get the image or text to show. Here is my code I have so far...
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 10, 10);
context.font = "12pt Arial";
context.fillText("My TEXT!", 20, 20);
};
imageObj.src = "http://images.google.com/intl/en_ALL/images/srpr/logo11w.png";
};
</script>
</head>
<body>
<div id="myCanvas"></div>
</body>
</html>
You have to have canvas tag instead of div and give it height and width
<canvas id="myCanvas" width="578" height="400"></canvas>
I am new to javascript. I am creating new images in my js file by saying
What I intend to is draw a new image and remove the previous one...
My code sample is :
var image = new Image();
image.src = 'abc.png';
ctx.drawImage(image, x, y,30,30);
and then I am using
ctx.clearRect(x, y, 30, 30);
but it does not clear the images drawn..
What should I do?
Thanks in advance
Check this HTML5 canvas tutorial for clear and redraw new image
Hope this can be helpful for you.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html>