I'm trying to use an input into a search bar (length (in the code)) to draw a line of 'length' length.
I've set up a very rough canvas area, the search/variable input but can't seem to link them together. Currently, I have the variable in the lineTo direction and it does plot, but only remains static even if the variable is updated.
function myFunction() {
var length = document.getElementById("myText").value;
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(100,25);
ctx.lineTo(length,25);
ctx.stroke();
<canvas id="myCanvas" width="500" height="50"
style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText" value="Size...">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>
The canvas interaction commands run once. To redraw each time, place the code inside the myFunction:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function myFunction() {
var length = document.getElementById("myText").value;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(100, 25);
ctx.lineTo(length, 25);
ctx.stroke();
ctx.closePath();
}
myFunction();
<canvas id="myCanvas" width="500" height="50" style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText" value="Size...">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>
I recommend
<canvas id="myCanvas" width="500" height="50"
style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>
I removed "value="Size..."" I don't know if you had more intentions with that
var canvas = document.getElementById("myCanvas");
function myFunction() {
var length = document.getElementById("myText").value || 100;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(length,25);
ctx.lineTo(0,25);
ctx.stroke();
}
myFunction()
Related
I can show the full content of canvas in an <img> tag using canvas.toDataURL() method.
I can get a part of image from canvas using getImageData() method and draw it in another canvas using putImageData() method.
The problem is, I want to show the part of image getting by getImageData() in an <img> tag as canvas.toDataURL() but I failed.
What I've tried so far is:
var canvas = $('canvas')[0];
var ctx = canvas.getContext("2d");
$('#baseImg').load(function() {
ctx.drawImage(this, 0, 0);
});
$('#full').click(function () {
$('div').html('');
var image = new Image();
image.onload = function() {
$('div').html(this);
};
image.src = canvas.toDataURL();
});
// here i failed
$('#partail').click(function () {
$('div').html('');
var image = new Image();
image.onload = function () {
$('div').html(this);
};
image.src = ctx.getImageData(10, 10, 50, 50);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Canvas</h3>
<canvas id="canvas" width="100" height="100" style="border: 1px solid #000000;"></canvas>
<br/><br/>
<img id="baseImg" style="display: none;" src="data:image/png;base64,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" />
<input id="full" type="button" value="Show Full Image" />
<input id="partail" type="button" value="Show Partial Image" />
<h3>Image from canvas</h3>
<div style="border: 1px solid #000000; height: 100px; width: 100px;"></div>
You can use context.drawImage to draw a partial clipped rectangular part of your full image.
The clipping version of drawImage looks like this:
context.drawImage(imageObject,
XClipFromSource, YClipFromSource, widthToClipFromSource, heightToClipFromSource,
canvasX, canvasY, canvasWidth, canvasHeight
);
Here's example code and a demo:
<<===>>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var status=1;
var img=document.getElementById('baseImg');
$('#toggle').on('click',function(){
status*=-1;
draw();
});
draw();
//
function draw(){
if(status==1){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
}else{
canvas.width=50;
canvas.height=50;
ctx.drawImage(img,10,10,50,50,0,0,50,50);
}
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id=toggle>Toggle img display</button>
<br>
<canvas id="canvas" width=300 height=300></canvas>
<img id="baseImg" style="display: none;" src="data:image/png;base64,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" />
I have solved my problem with the suggestions of everyone. I've used a temporary canvas to hold the part of main canvas and then get the partial image from it.
And my solution is:
var canvas = $('canvas')[0];
var ctx = canvas.getContext("2d");
$('#baseImg').load(function() {
ctx.drawImage(this, 0, 0);
});
$('#full').click(function() {
$('div').html('');
var image = new Image();
image.onload = function() {
$('div').html(this);
};
image.src = canvas.toDataURL();
});
$('#partail').click(function() {
$('div').html('');
var height = 50, width = 50;
var copyCanvas = $('<canvas id="canvas" width="' + width + '" height="' + height + '"></canvas>')[0];
var copyCtx = copyCanvas.getContext("2d");
copyCtx.putImageData(ctx.getImageData(10, 10, width, height), 0, 0);
var image = new Image();
image.onload = function() {
$('div').html(this);
};
image.src = copyCanvas.toDataURL();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Canvas</h3>
<canvas id="canvas" width="100" height="100" style="border: 1px solid #000000;"></canvas>
<br /><br />
<img id="baseImg" style="display: none;" src="data:image/png;base64,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" />
<input id="full" type="button" value="Show Full Image" />
<input id="partail" type="button" value="Show Partial Image" />
<h3>Image from canvas</h3>
<div style="border: 1px solid #000000; height: 100px; width: 100px;"></div>
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>
I have taken 2 canvas one is the source and another is ther target. When I mouse over the image in canvas it should get enlarged in canvas2
How can I increase the height of image in canvas2 i want magnify effect .Below is the code.
Thanks
Husein
<html>
<body>
<input type="button" onclick="h()">
<p>Image to use:</p>
<p>Canvas:</p>
<canvas id="myCanvas" onmousemove="h()" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p>Canvas2:</p>
<canvas id="myCanvas2" width="100" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var image = new Image();
image.crossOrigin="anonymous";
image.src="img_the_scream.jpg"
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=image ;
ctx.drawImage(img,0,0);
var d=document.getElementById("myCanvas2");
var ctx1=d.getContext("2d");
function h()
{
var img=ctx.getImageData(event.clientX-80,event.clientY-100,100,100);
ctx1.clearRect ( 0 , 0 , d.width , d.height );
ctx1.putImageData(img,0,0);
//d.width="200";
//d.height="200";
}
</script>
</body>
</html>
All you have to do is use toDataUrl and drawImage instead of getImageData and putImageData. Example:
function h() {
var img=new Image();
img.src = ctx.toDataUrl();
img.onload = function() {
ctx1.drawImage(img,0,0,c.width*horizontalMagnification,c.height*verticalMagnification);
};
}
Alternatively, you could just call ctx1.scale(horizontalMagnification,verticalMagnification); before you use putImageData.
<div>
<canvas id="canvas" width="250px" height="400px" style="border: 1px solid black" onload="drawCircle()"></canvas>
</div>
<script type="text/javascript" src="canvasjs.js"></script>
</body>
</html>
var canv = document.getElementById("canvas");
var ctx = canv.getContext("2d");
function drawCircle(){
ctx.fillStyle="blue";
ctx.beginPath();
ctx.arc(50,50,50,0,Math.PI*2);
ctx.closePath();
ctx.fill();
}
Just wondering if anyone can tell me why this does not draw to canvas. If I remove the code from the function it works.
You did not invoke your function.
please append this code below your codes;
drawCircle();
I am trying to display a text on a canvas by entering a message in a textbox but it's not appearing.
Here is my code:
<html>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<input type="text" name="fname" size="50" id="form_val">
<button onclick="clicked()">Submit</button>
<script type="text/javascript">
function clicked () {
var x = document.getElementById("form_val");
return x.value;
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "25px Verdana";
ctx.fillText(clicked(), 250, 250);
</script>
</body>
</html>
The code outside of your function is triggered immediately, put it inside the function so it's called when it needs to be (as it currently stands, it calls nothing. And when you click the button, it's returning the input value to the onclick method. Try this instead:
function clicked(){
var x=document.getElementById("form_val");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
ctx.fillText(x.value,250,250);
}
HTML:
<canvas id="myCanvas" width="600" height="400"></canvas>
<input type="text" name="fname" size="50" id="form_val">
<button id='submit'>Submit</button>
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
document.getElementById('submit').addEventListener('click', clicked);
function clicked(){
var x=document.getElementById("form_val");
// Create the text when the button is clicked
ctx.fillText(x.value,250,250);
}
Fiddle.
I believe you want to do something like this
<script type="text/javascript">
function clicked(){
var x=document.getElementById("form_val");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
ctx.fillText(x.value,250,250);
}
With this, the text will be filled when clicking the button. Note: I haven't tested the code, but you might get the picture