HTML5/JavaScript Canvas Text Gradient Effect - javascript

Is there a way to apply a gradient to a text inside a canvas using HTML5/JavaScript only?
<canvas id="myCanvas">
<p>Hello World!</p>
</canvas>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Hello World!", 10, 90);
</script>

Try This using css.
p{
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Related

Drawing a triangle in a canvas

I want to draw some triangles in a canvas procedurally (eventually adding some animation and other effects). I've managed to get some simple shapes into the canvas but fo some reason cannot draw triangles for some reason. I've been using some code from this question but so far it doesn't work.
HTML
There's more, but for simplicity I've left out the parts that aren't used at all. I'm using Bootstrap. That script path is a valid path as well.
function triangles() {
let left = document.getElementById("left")
let ctx = left.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.moveTo(100, 0);
ctx.moveTo(0, 100);
ctx.moveTo(0, 0);
ctx.closePath();
ctx.fill();
ctx.strokeStyle = "blue";
ctx.lineWidth = 4;
ctx.stroke();
}
triangles()
canvas {
width: 400px;
height: 400px;
border: 2px solid #A2A2A2;
}
<div class="min-vh-100">
<div class="row align-items-start">
<div class="col-2">
<canvas id="left"></canvas>
</div>
<div class="col-8">
</div>
<div class="col-2">
<canvas id="right"></canvas>
</div>
</div>
</div>
Using this gives me a completely blank canvas. As said previously, I have played around with other ways of drawing to the canvas such as the fillRect function and can draw properly.
Any advice is probably helpful thanks
You're just moving around. To draw shapes, use lineTo.
let left = document.getElementById("left")
let ctx = left.getContext("2d");
ctx.fillStyle = "red";
ctx.strokeStyle = "blue";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.lineTo(0, 100);
ctx.lineTo(0, 0);
ctx.closePath();
ctx.fill();
ctx.stroke();
canvas {
width: 400px;
height: 400px;
border: 1px solid black;
}
<canvas id="left"></canvas>

put html canvas at the top left of page

I have the following html file:
<canvas id="myCanvas" width="1440" height="800" style="border:0px solid #d3d3d3;"></canvas>
<body style="background-color:#FF0000;">
<script>
var canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.fillStyle = "#00FF00"
ctx.fillRect(0, 0, 2400, 2000) // background
ctx.stroke()
</script>
which produces a page that looks like this:
Notice that the canvas begins slightly below and to the right of the top left corner. How can I place it exactly at the top left corner?
Add margin: 0; padding: 0; to the body and it will place the canvas to the top-left.
Use position position:absolute; top: 0; left: 0;.
<canvas id="myCanvas" width="1440" height="800" style="border:0px solid #d3d3d3;position:absolute; top: 0; left: 0;"></canvas>
<body style="background-color:#FF0000;">
<script>
var canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.fillStyle = "#00FF00"
ctx.fillRect(0, 0, 2400, 2000) // background
ctx.stroke()
</script>
Try this on your css
*{
padding:0;
margin:0;
}
body{
background:#00FF00;
}
canvas{
position: absolute;
top: 0;
left: 0;
}

Is there something I am doing wrong by trying to make a rectangle?

I am trying to make a rectangle by filling it with html/javascript, but for some reason, even though it's only a few lines of code, I can't figure out what I'm doing wrong here
I've already tried in the code using strokeStyle and not using the viewport , I also tried using var canvas = document.getElementById("myCanvas"); like this, with double quotes
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, 40, 40);
<canvas id="myCanvas" style="border: 1px solid black; height: 50px; width: 100vw; max-width: 100%;"></canvas>
I truly don't know anymore what I'm doing wrong and I just want to make a rectangle
You're drawing a white rectangle on a white canvas.
Change ctx.fillStyle = "rgb(255, 255, 255)"; to be a color that shows up on a white background:
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(0, 0, 40, 40);
<canvas id="myCanvas" style="border: 1px solid black; height: 50px; width: 100vw; max-width: 100%;"></canvas>

How do I change the 'x' and 'y' of a canvas?

When I create a canvas I can only change the width and height. What piece of code would I use to change the x and y position of the canvas?
Look how far left it is how do I make it more in the middle?
I have tried adding x and y to the canvas but to no avail.
Here is some of the code I uses for the canvas.
<html>
<canvas id="ctx" width="250" height="250" style="border:5px solid #000000"></canvas>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '50px Arial';
ctx.fillText('Hello',70,135);
</script>
</html>
Wrap your canvas tag one container(div) and add text-align: center
<html>
<div style="text-align:center;">
<canvas id="ctx" width="250" height="250" style="border:5px solid #000000"></canvas>
</div>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '50px Arial';
ctx.fillText('Hello',70,135);
</script>
</html>
This can be done with the margin-left CSS-property.
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '50px Arial';
ctx.fillText('Hello',70,135);
#ctx {
margin-left: 100px;
}
<canvas id="ctx" width="250" height="250" style="border:5px solid #000000"></canvas>
In order to center the canvas, you could use the following code:
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '50px Arial';
ctx.fillText('Hello',70,135);
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#canvas-wrapper {
display:flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
<div id="canvas-wrapper">
<canvas id="ctx" width="250" height="250" style="border:5px solid #000000"></canvas>
</div>
<html>
<center>
<canvas style='position:absolute;left:150px;top:5px;border:5px solid #000000' id="ctx" width="250" height="250"></canvas>
</center>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '50px Arial';
ctx.fillText('Hello',70,135);
</script>
</html>

canvas.height is not changing for IE9

In Java script I am changing the height and width of the HTML5 canvas. It works in Mozila, Chrome, opera and safari, But it is not working in IE9. Can any body tell me what I am doing wrong, do I need to set any property?
Thanks in advance
UPDATE:-
HTML:-
<body onload="Load();">
<canvas id="myCanvas" width="500" height="300"></canvas>
</body>
Javascript:-
function Load(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
img=new Image();
img.src= "data:image/bmp;base64,"+respObj.respData; //Adding bmp image header
img.onload = function(){
canvas.width = 300;
canvas.height = 500;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img,0,0,canvas.width, canvas.height);
}
}
CSS:-
.canvas{
height: auto;
width: auto;
margin : 0px 35px;
border:1px solid black;
position: relative;
}
Try the following code. It is working in IE9, Firefox, Chrome :
<!DOCTYPE html>
<html>
<style language="css/text">
.canvas{
height: auto;
width: auto;
margin : 0px 35px;
border:1px solid black;
position: relative;
}
</style>
<body onload="Load();">
<canvas id="myCanvas" width="500" height="300"></canvas>
<input type="button" onClick="change()"/>
</body>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
function Load(){
img=new Image();
//img.src= "data:image/bmp;base64,"+respObj.respData; //Adding bmp image header
canvas.width = 300;
canvas.height = 500;
context.fillStyle="#FF0000";
context.fillRect(0, 0, canvas.width, canvas.height);
//context.drawImage(img,0,0,canvas.width, canvas.height);
}
function change() {
canvas.width = 100;
canvas.height = 100;
context.fillStyle="#FF0000";
context.fillRect(0, 0, canvas.width, canvas.height);
}
</script>
</html>
I found the issue with my canvas. It was the issue with style. I have removed the height and width setting from the style script. Because of it, the canvas height and width was overriding to its default values i.e. 150 and 300 as height and width respectively.

Categories