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>
Related
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>
I have this snippet which puts a full-page <canvas> element into a 45-degree perspective using CSS. However, the transformed canvas exceeds the page's bounds and is clipped:
window.onload = window.onresize = function() {
// draw a gradient on the canvas
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
var grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
grad.addColorStop(0, '#ff0000');
grad.addColorStop(0.5, '#ffff00');
grad.addColorStop(1, '#00ff00');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
body {
margin: 0;
overflow: hidden;
}
canvas {
transform-style: preserve-3d;
transform: rotateX(45deg);
}
.container {
width: 100%;
height: 100%;
perspective: 50vw;
perspective-origin: 50% 0%;
}
<div class="container">
<canvas></canvas>
</div>
How would I ensure the entire canvas stays within the page's bounds (bottom side of the trapezoid should have the exact same width as the page), while maintaining the perspective effect? Either CSS or JavaScript solutions are fine, as long as they work with any page size.
translate it backwards using translateZ
look for a comment in CSS
window.onload = window.onresize = function() {
// draw a gradient on the canvas
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
var grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
grad.addColorStop(0, '#ff0000');
grad.addColorStop(0.5, '#ffff00');
grad.addColorStop(1, '#00ff00');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
body {
margin: 0;
overflow: hidden;
}
canvas {
transform-style: preserve-3d;
/* added translation here */
transform: translateZ(-50vmax) rotateX(45deg);
}
.container {
width: 100%;
height: 100%;
perspective: 50vw;
perspective-origin: 50% 0%;
}
<div class="container">
<canvas></canvas>
</div>
In CSS, I can chain multiple definitions in the text-shadow property to achieve effects such as glow:
.green-glow {
padding:20px 40px 40px;
font-family:'Georgia';
font-size:70px;
background-color:#000;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0f0, 0 0 70px #0f0, 0 0 80px #0f0, 0 0 100px #0f0, 0 0 150px #0f0;
}
<div class="green-glow">glow</div>
I would like to achieve similar effects when drawing text on a canvas element using CanvasRenderingContext2D.fillText but since shadow definitions are split among multiple properties (shadowBlur, shadowColor, etc.), it is not immediately obvious for me the adequate way to chain multiple shadows.
I can do multiple calls to CanvasRenderingContext2D.fillText, one for each defined shadow as the following snippet shows...
// get context
var ctx = document.querySelector('#test').getContext('2d');
// clear background to black
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, 500, 150);
// common font attributes
ctx.font = "70px Georgia";
ctx.fillStyle = 'white';
// apply multiple shadows
ctx.shadowColor = '#fff';
ctx.shadowBlur = 10;
ctx.fillText('glow', 50, 90);
ctx.shadowBlur = 20;
ctx.fillText('glow', 50, 90);
ctx.shadowBlur = 30;
ctx.fillText('glow', 50, 90);
ctx.shadowColor = '#0f0';
ctx.shadowBlur = 40;
ctx.fillText('glow', 50, 90);
ctx.shadowBlur = 70;
ctx.fillText('glow', 50, 90);
ctx.shadowBlur = 80;
ctx.fillText('glow', 50, 90);
ctx.shadowBlur = 100;
ctx.fillText('glow', 50, 90);
ctx.shadowBlur = 150;
ctx.fillText('glow', 50, 90);
canvas {
width: 500px;
height: 150px;
}
<canvas id="test" width="500" height="150"></canvas>
... and even though it doesn't quite look the same to me, it would be good enough for my purposes. But I am wondering about possible performance issues caused by those multiple calls to fillText and whether there is a more appropriate way to apply multiple text shadows on a canvas.
Thanks!
I have a popup with a canvas that displays a graph, but sometimes the graph is bigger than the canvas is there a way that I can add some sort of scrolling event to allow the user to scroll horizontally, to see the rest of the graph?
Canvas is a normal DOM element like img, so you can use the regular CSS styles to define the scrolling behavior. For example:
$(document).ready(function(){
var ctx = $("#canvs").get(0).getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0,0,1600,300);
ctx.strokeStyle = "lime";
ctx.moveTo(0, 150);
for (var i = 0; i <= 16; i++){
var y = i % 2 == 0 ? 50 : 250;
ctx.lineTo(i * 100, y);
ctx.stroke();
}
});
#cont{
display: block;
width: 500px;
height: 330px;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cont'>
<canvas id='canvs' width='1600px' height='300px'></canvas>
</div>
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;
}