I have a project creating layouts and i have decided to do it with canvas element.I created a function that takes 4 args.
function fillArc(camvas,x,y,w,h)
{
canv.beginPath();
var canv = document.getElementById("camvas");
var context = canv.getContext('2d');
context.strokeStyle="#FFFFFF";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.stroke();
canv.closePath();
}
I have several canvas elements so i want to create this border-radius box in different areas.I assumed that a call like:
<canvas width="500" height="500" id="canvaslayouts">
</canvas>
<script>
fillArc(canvaslayouts,10,10,50,50);
</script>
But this doesn't seem to work.Can anyone point my mistake please.
jsFiddle Demo
Place your function and the call to it in a script element
Pass in a string which matches the id of the canvas you wish to draw on
Use the context, not the canvas, to access the drawing API
<script>
function fillArc(camvas,x,y,w,h)
{
var canv = document.getElementById(camvas);
var context = canv.getContext('2d');
context.beginPath();
context.strokeStyle="#ffffff";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.stroke();
context.closePath();
}
fillArc("canvaslayouts",10,10,50,50);
</script>
Putting it in a <script> block should do the trick:
<canvas width="500" height="500" id="canvaslayouts"></canvas>
<script>
fillArc(canvaslayouts,10,10,50,50);
</script>
Also, note that your fillArc() function definition (or any other executable JavaScript that you may have) should also be in a <script> block.
Well, a few things:
You're never using the camvas variable.
You're always refering to #camvas.
You call canv.beginPath() before setting canv to anything.
Your javascript code in the canvas is not in script tags
Your javascript code in the canvas tag calls the function with canvaslayouts as the first parameter. This means you're searching for a variable named "canvaslayouts" and not an ID. Change it to "canvaslayouts" to specify that it's a string to be used in getElementById.
The correct code should be something like this:
function fillArc(camvas,x,y,w,h)
{
//Changed to use the variable instead, and moved it to the start
var canv = document.getElementById(camvas);
canv.beginPath();
var context = canv.getContext('2d');
context.strokeStyle="#FFFFFF";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.stroke();
canv.closePath();
}
and
<canvas width="500" height="500" id="canvaslayouts">
<script type="text/javascript">
//Use a script container
fillArc("canvaslayouts",10,10,50,50); //Use a string, not a variable
</script>
</canvas>
You need to change the .beginPath() and .closePath() calls so that they're applied to the context, and not to the canvas.
That can of course only be done once you've called canv.getContext().
You also need to:
use the correct ID - you've used "camvas" when it should be the variable with that name
put your JS inside <script> tags
i.e.:
<script>
function fillArc(camvas,x,y,w,h)
{
var canv = document.getElementById(camvas);
var context = canv.getContext('2d');
context.beginPath();
context.strokeStyle="#FFFFFF";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.closePath(); // NB: close the path before you stroke it
context.stroke();
}
</script>
<canvas width="500" height="500" id="canvaslayouts"> </canvas>
<script>
fillArc("canvaslayouts", 10, 10, 50, 50);
</script>
Related
here's the code:
HTML:
<body onload="initializeMap()">
<div id="map_canvas" style="width:100%; height:100%; z-index:1"></div>
<canvas id="control" style="width:100%; height:100%; z-index:2">Does Not Support Canvas Element</canvas>
</body>
Javascript:
<script type="text/javascript">
var canvas = document.getElementById('control');
var context = canvas.getContext('2d');
function draw(){
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
}
</script>
the draw function is called after initialization of the google map so the DOM should have already loaded by then, correct? What might have I done incorrectly?
The DOM has already been loaded when the draw-function is called, that is correct.
But the var canvas = document.getElementById('control');-line is evaluated before that, because it is not in the draw-function. It is executed immediately in the <head> of the document BEFORE the elements have been rendered.
I would suggest you change your init function to something like that
var canvas,context;
function initializeMap() {
canvas = document.getElementById('control');
context = canvas.getContext('2d');
}
If your javascript is loaded prior to your body then canvas will be undefined because the browser hasn't loaded/rendered it yet.
I am trying to draw a line on a canvas after a timeout period. One of the "lineTo" parameters is being sent a value from a variable that is being declared in another script and is being passed as a window.var....
I have a console log set up to execute at the same time as the variable is accessed in the canvas script as well.
onLoad, everything executes as it should. After the timeout, the console shows that the variable has a value, but the canvas line is not drawn.
At first I had no timeout inserted and the variable kept coming back as undefined. I opted to go with a timeout, as I don't fully understand callbacks yet.
Any advice would be greatly appreciated!
<script>
window.setTimeout(render,8500);
function render(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var end = window.testVar;
context.beginPath();
context.moveTo(4, 28);
context.lineTo(end, 28);
context.lineWidth = 10;
context.stroke();
console.log(end);
}
</script>
context.lineTo expects a number, so cast your testVar to a number
For example:
var end = parseInt(window.testVar);
Your code above works fine for me...the line draws itself after the specified delay:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
window.testVar=23;
window.setTimeout(render,2000);
function render(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var end = window.testVar;
context.beginPath();
context.moveTo(4, 28);
context.lineTo(end, 28);
context.lineWidth = 10;
context.stroke();
console.log(end);
}
body{ background-color: ivory; }
canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
User error....
I'm using WYSIWYG Web Builder, and I'm using layers. Some how, the canvas element was marked as "visibility: hidden";
Since the background of the canvas is transparent, I didn't catch it.
To all, thanks for commenting.
I have a html page in which i need to add more than 1 canvas element and load it on the page load.
function draw()
{
var c=document.getElementById("myCanvas");
var padding = 20;
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#E05D1B");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,275,50);
}
<canvas id="myCanvas" width="250" height="8" style="margin-bottom:10px;margin-left:10px;">
<img src="images\gradient1.png" style="margin-bottom:10px;margin-left:10px;"/>
</canvas>
I am adding like this code with different id but i need to recode the javascript; how can i reduce it??
<canvas id="myCanvas1" width="250" height="8" style="margin-bottom:10px;margin-left:10px;"> <img src="images\gradient1.png" style="margin-bottom:10px;margin-left:10px;"/> </canvas>
You could pass the contexts of your separate canvas elements as a parameter to your draw function (fiddle):
function draw(ctx)
{
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#E05D1B");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,275,50);
}
draw(document.getElementById("canvas_1").getContext("2d"));
draw(document.getElementById("canvas_2").getContext("2d"));
Or, depending on how many canvas elements you have, it may be more efficient to call your draw function on a loop (fiddle):
function draw(ctx)
{
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#E05D1B");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,275,50);
}
var i = 1;
while (document.getElementById("canvas_" + i)) {
draw(document.getElementById("canvas_" + i).getContext("2d"));
i ++;
}
I use this example that allow me to draw into the canvas. http://devfiles.myopera.com/articles/649/example2.html
However, I want to have a button that clears the content of it. This is what I did without luck.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#clearme").click(function() {
var view = $('#imageView');
var context = view[0].getContext('2d');
context.clearRect(550, 550, view.width(), view.height());
});
});
clear
<div id="container">
<canvas id="imageView" width="610" height="680">
</canvas>
</div>
What am I missing here?
Clear the canvas via its API instead:
var view = $('#imageView');
var context = view[0].getContext('2d');
context.clearRect(0, 0, view.width(), view.height());
You have to clear the canvas, empty() is not what you're looking for. Do something like this:
var ctx = canvasEl.getContext('2d');
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
ctx.beginPath();
Empty() wont clear a canvas. You'll have to use clearRect.
How can I bind an event to a shape drawn on a canvas? I presumed this would work but I get an error.
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
var rec = ctx.fillRect (0, 0, 55, 50);
rec.onclick = function(){
alert('something');
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Put the event handlers on the canvas element, and then use the mouse position to decide which conceptual part of the canvas the event is occurring on.
I haven't played with canvas all that much, but I wouldn't be surprised if there were already some libraries that help you manage event delegation to such imaginary elements.
Using Kineticsjs, you can handle shape events in a canvas as follows:
<script>
shape.on('mousedown mouseover' function(evt) {
// do something
});
</script>
Sounds like you should be using svg instead since it allows you to add event listeners on shapes. I'd recommend checking out raphaeljs.com for a start.