Good day,
I have a problem with the canvas. I'm using boostrap and I'd like to show some graphics. I have this:
<div id="charts" class="tab-pane fade">
<div class="container-fluid-charts onload="init();">
<div id="container1" style="width: 100%; height: 400px; margin: 0 auto;border: 1px solid black;background-color: white;"></div>
<canvas id="chart1">Your browser cannot display the charts...</canvas>
</div>
</div>
The Javascript is composed like this:
function init() {
var c = document.getElementById("chart1");
var ctx1 = c.getContext('2d');
drawChart1();
}
function drawChart1() {
ctx1.moveTo(ctx.canvas.width / 2 , 0);
ctx1.lineTo(0, ctx.canvas.height);
ctx1.stroke();
ctx1.beginPath();
ctx1.arc(95,50,40,0,2*Math.PI);
ctx1.stroke();
ctx1.font = "30px Arial";
ctx1.fillText("Hello World",10,50);
}
I have no errors showing and the canvas is empty. I think it's related to the DOM... Anyone can help me please ?
You declare the local variable var ctx1 = ... within the context of the init() function. You cannot access it outside that function. Thus, accessing ctx1 within drawChart1() fails.
Also, within drawChart1(), you are accessing a ctx variable which hasn't been declared anywhere.
You are missing a quote closing the class="... attribute.
Also, the <div> element doesn't support the onload attribute: How to add onload event to a div element?
A better solution is to pass the context ctx as a parameter to the drawChart1(ctx) function. Placing your script below all relevant DOM elements makes the onload handler superfluous:
<div id="charts" class="tab-pane fade">
<div class="container-fluid-charts">
<div id="container1" style="width: 100%; height: 400px; margin: 0 auto;border: 1px solid black;background-color: white;"></div>
<canvas id="chart1">Your browser cannot display the charts...</canvas>
</div>
</div>
<script>
function drawChart1(ctx) {
ctx.moveTo(ctx.canvas.width / 2, 0);
ctx.lineTo(0, ctx.canvas.height);
ctx.stroke();
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
}
var c = document.getElementById("chart1");
var ctx = c.getContext('2d');
drawChart1(ctx);
</script>
Related
I'm trying to draw a rectangle when the user presses a button in Javascript. If the code in the script is not in a function, it draws the rectangle but of course doesn't respond to the button. If I put it in a function called by the button, nothing happens whether it's in the head or the body. How can I draw the rectangle with the button press?
Many thanks in advance!
<html>
<head>
<title>Test 4</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="600">
<p>Fallback content for browsers that don't support the canvas tag.</p>
</canvas>
<script>
function myFunction() {
const canvas = document.querySelector('.myCanvas');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.fillRect(50, 50, 100, 150);
}
</script>
<p>
Click the button
<button onclick="myFunction()">Try it</button>
</p>
</body>
</html>
Change your query selector to #myCanvas.
A prefix of . indicates it should find an element with a class of myCanvas, to search instead for an element id use the # prefix.
I use canvas and draw a closed area and want the area to fill by some color. Here is how I do it. I draw closed area with lines
I draw line (1)
Next line (2) starts from end of the previous one
Last line (3) starts from end of line (2) and ends at the start of line (1)
So as result I have closed area and want to fill by some color
Here is the chunk of code I used:
context.fillStyle = '#8ED6FF';
context.fill();
But it not works. Неre is the code I use to accomplish the task.
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="978" height="900"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
context.beginPath();
// line (1)
context.moveTo(10, 10);
context.lineTo(190, 190);
// line (2)
context.moveTo(190, 190);
context.lineTo(200, 280);
// line (3)
context.moveTo(200, 280);
context.lineTo(10, 10);
// here I try fill the area by color
context.fillStyle = '#8ED6FF';
context.fill();
context.stroke();
</script>
</body>
</html>
I found the solution.
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="978" height="900"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
context.beginPath();
context.moveTo(70, 70);
context.lineTo(290, 290);
context.lineTo(300, 380);
context.closePath()
context.fillStyle = '#8ED6FF';
context.fill();
context.stroke();
</script>
</body>
</html>
I'm trying to develop a clone of the online web app Patatap and I want to display the instructions for 5 seconds to the user when they load the page and then have the page fade out.
This is what I have so far:
HTML:
<body>
<canvas id="myCanvas" resize></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "white";
context.font = "regular 40px Questrial";
context.textAlign = "center";
context.fillText("Press 'a-z' keys to play a tune!", canvas.width/2, canvas.height/2);
var fade_out = function() {
$("#context").fadeOut().empty();
}
setTimeout(fade_out, 5000);
</script>
</body>
CSS:
canvas {
width: 100%;
height: 100%;
background-color: black;
}
body, html {
height: 100%;
margin: 0;
}
I can't figure out why my text isn't displaying and fading out, I'm new to Javascript so any help/suggestions will be greatly appreciated.
Many thanks!
$("#context").fadeOut() is looking for an element with an id of 'context'. There's no such element. Your canvas has an id of 'myCanvas'. So try $("#myCanvas").fadeOut(). Also, at least in a test, the background is white so drawing text in white doesn't show up. What's below works, with the fillStyle changed to red:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.font = "regular 40px Questrial";
context.textAlign = "center";
context.fillText("Press 'a-z' keys to play a tune!", canvas.width/2, canvas.height/2);
var fade_out = function() {
$("#myCanvas").fadeOut();
}
setTimeout(fade_out, 5000);
</script>
</body>
Hello People I'd Like to Know How to Draw More Arc Inside My Canvas, What I Need to Draw This circles:
So I Write This Responsive Code to Make my Canvas is Responsive:
var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext('2d');
var centerX = myCanvas.width / 2;
var centerY = myCanvas.height / 2;
var borderWidth = 20;
var borderColor = '#2DC36A';
var radius = (myCanvas.width / 2) - (borderWidth / 2);
// days arc canvas background
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.lineWidth = borderWidth;
ctx.strokeStyle = borderColor;
ctx.stroke();
ctx.closePath();
// Make Canvas Responsive
function makeResponsive() {
var containerWidth = $('.progress-nested').width();
$('.progress-nested').height(containerWidth);
var canvasElements = ['#myCanvas'];
$('#myCanvas').width(containerWidth).height(containerWidth);
}
makeResponsive(); // Make Canvas Responsive in Document ready
$(window).resize(function () {
makeResponsive(); // Make Canvas Responsive in Window Resize
});
#progress {
width: 100%;
padding: 5px;
}
.progress-nested{
position:relative;
border-radius:50%;
}
canvas {
display:block;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="progress">
<div class="container">
<div class="row">
<div class="col-xs-3 col-md-2 col-md-offset-2">
<div class="progress-nested">
<canvas id="myCanvas" width="250" height="250"></canvas>
</div>
</div>
</div>
</div>
</div>
Note: Please Run Code Snippet In Full Page
I am learner html5 canvas
When I try to draw 2 circle (a circle within a circle).
When I draw a circle and fill it, it works.
when I draw second circle and fill it. it turns into first circle with second fill style.
What I try to create is a orange circle in a grey circle.
I tries many time to solve this but by each way it get problem..
Please check my code and let me know if i am wrong or what to do to fix this problem.
I have following code
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<style>
body{
}
#mycanvas{
border:1px solid #000;
margin:0px auto;
display:block;
}
#mycanvas1{
border:1px solid #000;
margin:0px auto;
display:block;
}
</style>
<body>
<canvas id="mycanvas" width="200" height="200">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="mycanvas1" width="200" height="200">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c = document.getElementById("mycanvas");
var b = document.getElementById("mycanvas1");
var d = document.getElementById("mycanvas1");
var ctx = c.getContext("2d");
var ctx1 = b.getContext("2d");
var ctx2 = d.getContext("2d");
ctx.fillStyle = "#bddfb3";
ctx.fillRect(0,0,200,200);
ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.stroke();
ctx1.fillStyle = "#f1b147";
ctx1.arc(100,100,80,0,360);
ctx1.fill();
ctx2.fillStyle = "#222";
ctx2.arc(100,100,50,45,180);
ctx2.fill();
ctx1.fillStyle="#fff";
ctx1.font="72px Arial";
ctx1.fillText("i",90,125);
</script>
</body>
</html>
This is a easy way to draw a orange circle inside a grey circle on canvas.
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
// orange circle
ctx.beginPath();
// centerX, centerY, radius, start angle, end angle, counterclockwise
ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = 'orange';
ctx.fill();
// grey circle
ctx.lineWidth = 25;
ctx.strokeStyle = 'grey';
ctx.stroke();
<canvas id="canvas" width="500" height="250"></canvas>