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

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>

Related

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;
}

How do I change X-Y positions of an circle on a canvas

I'm trying out canvas for the first time. After creating a circle I want to be able to change the position of the center of this circle at the click of a button. But I am unable to figure how to do so. Can someone suggest a method for it?
#button{
height: 25px;
width:125px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
<html>
<head></head>
<body>
<div id="button" onclick="changePosition()">Click here</div>
<canvas id="testCanvas" width="500px" height="500px"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("testCanvas");
var a = canvas.getContext("2d");
a.fillStyle = "#b22222";
a.beginPath();
a.arc(100,100,25,0,2*Math.PI);
a.fill();
function changePosition(){
//what do I put here??
}
</script>
</body>
</html>
You need to redraw the scene. Create a function that resets the canvas and then draws the circle
var canvas = document.getElementById("testCanvas");
var ctx = canvas.getContext("2d");
var circlePos = {
left: 100,
top: 100,
}
function renderCircle( circlePos ) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#b22222";
ctx.beginPath();
ctx.arc(circlePos.left, circlePos.top, 25, 0, 2 * Math.PI);
ctx.fill();
}
function changePosition() {
circlePos.left += 10;
if ( circlePos.left > canvas.width ) {
circlePos.left = 0;
}
renderCircle( circlePos );
}
changePosition();
#button {
height: 25px;
width: 125px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
<button onclick="changePosition()">Click here</button>
<canvas id="testCanvas" width="500" height="200"></canvas>

canvas is null and canvas.getContext is not a function

I am busy working through this tutorial in which a 2D game is created using Javascript and the canvas element and I am having trouble with two errors.
My initial code was this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Game Canvas Workshop</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id"myCanvas" width="480" height="320"></canvas>
<!-- <script type="text/javascript" src="../game.js"></script> -->
<script>
//var test = document.getElementsByTagName("canvas");
//console.log(test);
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
console.log(ctx);
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fill();
ctx.closePath();
</script>
</body>
</html>
When I try to grab the canvas element using document.getElementById it returns the error: canvas is null
So I changed the code to get the canvas element using document.getElementsByTagName and then wrote a test to print the result to the console and it returned the element.
But then when I try to use canvas.getContext("2d") I get the following error: canvas.getContext("2d") is not a function
I've read most of the answers to similar queries and tried them out with my code but they don't seem to work for me.
Please help.
Problem is here (missing "=" )
<canvas id"myCanvas" width="480" height="320"></canvas>
Change to:
<canvas id="myCanvas" width="480" height="320"></canvas>
Full code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Game Canvas Workshop</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<!-- <script type="text/javascript" src="../game.js"></script> -->
<script>
//var test = document.getElementsByTagName("canvas");
//console.log(test);
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
console.log(ctx);
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fill();
ctx.closePath();
</script>
</body>
</html>
You need
<canvas id="myCanvas" width="480" height="320"></canvas>
^
an assignment for the id.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//console.log(ctx);
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fill();
ctx.closePath();
* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }
<canvas id="myCanvas" width="480" height="320"></canvas>
Please load your <script> after <body>. then this would work.
<body>
<input type="text" id="myInput" >
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
</script>

How to three different shape triangle in single page using canvas method? [duplicate]

function areaval() {
var equation = $('#number').val();
var secod = $('#acure').val();
var thrd = $('#pmet').val();
var frd = $('#cmet').val();
var a = Math.abs(parseInt(equation * secod) );
var d = Math.abs(a/2);
document.getElementById("result").innerHTML = "Area=(1/2)*b*h<br><br>A="+d+"cm2";
document.getElementById("step4.1").innerHTML = "step1=(1/2)*"+equation+"*"+secod;
var f= Math.abs(parseInt(equation) + parseInt(thrd) + parseInt(frd));
document.getElementById("result2.2").innerHTML = "Perimeter=a+b+c<br><br>P="+f+"cm2";
document.getElementById("step4.6").innerHTML = "step2="+equation+"+"+thrd+"+"+frd;
$('input').val('');
return false;
}
function rightang() {
var givenone = $('#oppsite').val();
var giventwo = $('#adjacent').val();
var giventhree = $('#hyper').val();
var givenhig = $('#hidgt').val();
var agive = Math.abs(parseInt(givenone * givenhig) );
var ragive = Math.abs((agive)/2);
document.getElementById("raitresult").innerHTML = "Area=(1/2)*b*h<br><br>A="+ragive+"cm2";
document.getElementById("step5.1").innerHTML = "step1=(1/2)*"+givenone+"*"+givenhig;
var subperi = Math.abs((2*givenone)+(2*giventwo));
var rtsub = Math.sqrt(subperi);
var srtadd = Math.floor(parseInt(givenone)+parseInt(giventwo));
var finres = Math.floor(parseInt(rtsub)+parseInt(srtadd));
document.getElementById("periresult2").innerHTML = "Perimeter=a+b+c<br><br>P="+finres+"cm2";
document.getElementById("step5.5").innerHTML = "step2="+givenone+"+"+giventwo+"+"+giventhree;
var hysid = Math.floor(parseInt(finres)/parseInt(giventwo));
var hyang = Math.abs(2*parseInt(hysid));
document.getElementById("periresult3").innerHTML = "Angle of a=A*2/b<br><br>angle="+hyang+"degree";
document.getElementById("step5.8").innerHTML = "step3="+hysid+"*"+"2"+"/"+givenone;
$('input').val('');
return false;
}
function obtuseang() {
var oppavall = $('#oppsite6').val();
var oppbval = $('#oppsite7').val();
var obtont = $('#oppsite1').val();
var obttwo = $('#oppsite2').val();
var obttriagle = Math.abs(parseInt(obtont * obttwo ) );
var obtval = Math.abs((obttriagle)/2);
document.getElementById("raitresult43").innerHTML = "Area=(1/2)*b*h<br><br>A="+obtval+"cm2";
document.getElementById("step6.1").innerHTML = "step1=(1/2)*"+obtont+"*"+obttwo;
var obtperi = Math.abs(parseInt(oppavall)+parseInt(oppbval)+parseInt(obtont));
document.getElementById("obtuseresult").innerHTML = "Perimeter=a+b+c<br><br>P="+obtperi+"cm2";
document.getElementById("stepfine").innerHTML = "step2="+oppavall+"+"+oppbval+"+"+obtont;
$('input').val('');
return false;
}
#equilateral-try {
width: 0;
height: 0;
border-left: 128px solid transparent;
border-right: 48px solid transparent;
border-bottom: 95px solid black;
position:absolute;
top:100px;
left:100px;
}
#coverbox {
position:absolute;
top:calc(8%);
left:calc(3%);
width:300px;
height:500px;
}
#equilateral-try:after {
width: 100%;
height: 100%;
border-left: 110px solid transparent;
border-right: 40px solid transparent;
content: "";
border-bottom: 80px solid #fff;
position:absolute;
top:10px;
left:-110px;
z-index:1;
}
#strightline {
position:absolute;
left:66%;
top:22%;
z-index:2;
}
#right-try {
width: 0;
height: 0;
border-bottom: 100px solid black;
border-right: 100px solid transparent;
position:absolute;
top:16%;
left:45%;
}
#coverbox11 {
position:absolute;
top:calc(8% );
left:calc(30% );
width:300px;
height:500px;
}
#right-try:after {
width: 100%;
height: 100%;
content: "";
border-bottom: 85px solid #fff;
border-right: 85px solid transparent;
position:absolute;
top:12px;
left:6px;
z-index:6;
}
#obtuse-try {
width: 0;
height: 0;
border-bottom: 100px solid black;
border-left: 140px solid transparent;
position:absolute;
top:17%;
left:20%;
}
#coverbox12 {
position:absolute;
top:calc(8% );
left:calc(65% );
width:300px;
height:500px;
}
#obtuse-try:after {
width: 100%;
height: 100%;
content: "";
border-bottom: 80px solid #fff;
border-left: 120px solid transparent;
position:absolute;
top:14px;
left:-125px;
z-index:8;
}
#strightline3 {
position:absolute;
left:68.8%;
top:16%;
z-index:9;
}
<html>
<head>
<script src="angleoftriangle.js"></script>
<link rel="stylesheet" type="text/css" href="angleoftriangle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div id="coverbox">
<div id="equilateral-try">
</div>
<form id="text" onsubmit="return areaval()">
<p id="heading1"style="position:absolute;top:8%;left:20%;font-size:22px;color:black;">Acute Triangle</p>
<p id="heading5"style="position:absolute;top:42%;left:20%;font-size:20px;color:black;">abc<90deg.</p>
<input type="text" value ="" id="number" style="position:absolute;width:8%;height:4%;left:60%;top:40%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="b"required>
<input type="text" value ="" id="acure" style="position:absolute;width:8%;height:4%;left:78%;top:31%;outline:none;border:none;font-size:25px;z-index:4;background-color:transparent;" placeholder="h"required>
<input type="text" value ="" id="pmet" style="position:absolute;width:8%;height:4%;left:42%;top:25%;outline:none;border:none;font-size:25px;z-index:6;background-color:transparent;" placeholder="a"required>
<input type="text" value ="" id="cmet" style="position:absolute;width:8%;height:4%;left:88%;top:25%;outline:none;border:none;font-size:25px;z-index:5;background-color:transparent;" placeholder="c"required>
<button style="position:absolute;height:20px;left:70%;top:41%;">sol</button>
</form>
<div id="result"style="position:absolute;top:55%;left:20%;font-size:20px;color:#878787;"></div>
<div id="step4.1"style="position:absolute;top:60%;left:20%;font-size:20px;color:#878787;"></div>
<div id="result2.2"style="position:absolute;top:68%;left:20%;font-size:20px;color:#878787;"></div>
<div id="step4.6"style="position:absolute;top:73%;left:20%;font-size:20px;color:#878787;"></div>
<svg height="16%" width="14%"id="strightline">
<line x1="30" y1="0" x2="30" y2="105" style="stroke:black;stroke-width:2" />
</svg>
</div>
<div id="coverbox11">
<div id="right-try">
</div>
<form id="text1" onsubmit="return rightang()">
<p id="heading1"style="position:absolute;top:7%;left:32%;font-size:22px;color:black;">Rightangle Triangle</p>
<p id="heading5"style="position:absolute;top:42%;left:43%;font-size:20px;color:black;"> a=90degree.</p>
<input type="text" value ="" id="oppsite" style="position:absolute;width:8%;height:4%;left:38%;top:23%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="a"required>
<input type="text" value ="" id="hidgt" style="position:absolute;width:8%;height:4%;left:48%;top:23%;outline:none;border:none;font-size:25px;z-index:20;background-color:transparent;" placeholder="h"required>
<input type="text" value ="" id="adjacent" style="position:absolute;width:8%;height:4%;left:53%;top:37%;outline:none;border:none;font-size:25px;z-index:4;background-color:transparent;" placeholder="b"required>
<input type="text" value ="" id="hyper" style="position:absolute;width:8%;height:4%;left:68%;top:23%;outline:none;border:none;font-size:25px;z-index:6;background-color:transparent;" placeholder="c"required>
<button style="position:absolute;height:20px;left:64%;top:38%;">sol</button>
</form>
<div id="raitresult"style="position:absolute;top:55%;left:43%;font-size:20px;color:#878787;"></div>
<div id="step5.1"style="position:absolute;top:60%;left:43%;font-size:20px;color:#878787;"></div>
<div id="periresult2"style="position:absolute;top:70%;left:43%;font-size:20px;color:#878787;"></div>
<div id="step5.5"style="position:absolute;top:75%;left:43%;font-size:20px;color:#878787;"></div>
<div id="periresult3"style="position:absolute;top:85%;left:43%;font-size:20px;color:#878787;"></div>
<div id="step5.8"style="position:absolute;top:90%;left:43%;font-size:20px;color:#878787;"></div>
</div>
<div id="coverbox12">
<div id="obtuse-try">
</div>
<svg height="15%" width="15%"id="strightline3">
<path id="lineAB" d="M 100 150 l 70 -200" stroke="black" stroke-width="2" fill="none" />
</svg>
<form id="text2" onsubmit="return obtuseang()">
<p id="heading16"style="position:absolute;top:8%;left:20%;font-size:22px;color:black;">Obtuse Triangle</p>
<p id="heading17"style="position:absolute;top:42%;left:30%;font-size:20px;color:black;">a>90degree.</p>
<input type="text" value ="" id="oppsite1" style="position:absolute;width:8%;height:4%;left:48%;top:38%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="b"required>
<input type="text" value ="" id="oppsite2" style="position:absolute;width:8%;height:4%;left:58%;top:28%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="h"required>
<input type="text" value ="" id="oppsite6" style="position:absolute;width:8%;height:4%;left:71%;top:23%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="c"required>
<input type="text" value ="" id="oppsite7" style="position:absolute;width:8%;height:4%;left:36%;top:23%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="a"required>
<button style="position:absolute;height:20px;left:58%;top:39%;">sol</button>
</form>
<div id="raitresult43"style="position:absolute;top:55%;left:30%;font-size:20px;color:#878787;"></div>
<div id="step6.1"style="position:absolute;top:60%;left:30%;font-size:20px;color:#878787;"></div>
<div id="obtuseresult"style="position:absolute;top:70%;left:30%;font-size:20px;color:#878787;"></div>
<div id="stepfine"style="position:absolute;top:75%;left:30%;font-size:20px;color:#878787;"></div>
</div>
<p id="heading19"style="position:absolute;top:-1%;left:30%;font-size:28px;color:blue;">Different types of triangle in angle method.</p>
</body>
</html>
I have some code in triangle shape calculator that generates CSS code used to draw the triangle shape. But I want to draw the different shapes in the triangle using canvas method. How can I change the programming code in CSS to canvas?
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
}
<html>
 <body onload="draw();">
   <canvas id="canvas" width="100" height="100"></canvas>
 </body>
</html>
You can reffer following artice-Drawing shapes in canvas.
`
<!DOCTYPE html>
<html>
<head>
<title>Triangle Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");
// the triangle
context.beginPath();
context.moveTo(200, 100);
context.lineTo(100, 300);
context.lineTo(300, 300);
context.closePath();
// the outline
context.lineWidth = 10;
context.strokeStyle = '#666666';
context.stroke();
// the fill color
context.fillStyle = "#FFCC00";
context.fill();
</script>
</body>
</html>
`Try this
Html :
<!DOCTYPE html>
<html>
<head>
<title>Triangle Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>
javascript :
var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");
// the triangle
context.beginPath();
context.moveTo(100, 100);
context.lineTo(100, 300);
context.lineTo(300, 300);
context.closePath();
// the outline
context.lineWidth = 10;
context.strokeStyle = '#666666';
context.stroke();
// the fill color
context.fillStyle = "#FFCC00";
context.fill();
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>

HTML5/JavaScript Canvas Text Gradient Effect

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;
}

Categories