<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();
Related
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()
Need to put text on top of this canvas. I'm sure this has been asked before but I need some help. Thank you in advance.
<html>
<body>
<canvas id="myCanvas" width="1280" height="720"
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(1,1,2000,2000);
</script>
<script>
car canvas = document.getElementById("myCanvas");
var ctx = canvas.getcontext("2d");
ctx.font = "60px Arial";
ctx.fillText("Text here",200,200);
</script>
</body>
</html>
You have 2 typos:
car instead of var
And getcontext instead of getContext.
You also need to set fillStyle, with another color than the background:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(1, 1, 2000, 2000);
ctx.fillStyle = "black";
ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50);
ctx.font = "30px Verdana";
ctx.fillText("Big smile!", 10, 90);
<canvas id="myCanvas" width="1280" height="720">
</canvas>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3 ;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(1, 1, 2000, 2000);
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width / 2, canvas.height / 2);
</script>
</body>
</html>
You just need to set a different color to make it visible on your background.
For example, add ctx.fillStyle="white"; before you write the text but after you fill the background.
See fiddle here
I have a problem displaying two canvases on top of each other.
I'm using the ionic framework and easeljs to draw on one canvas. Now I want to also be able to see a cursor of varying size and color when using a mouse (not in-app of course), so I though I could draw on the lower layer canvas and show the cursor on a higher layer canvas, clearing it repeatedly on mouse move.
I have an ionic on-drag event, an on-touch event (both to draw) and an angujarjs ng-mousemove (for the cursor). I have to put all those events in the first canvas in the html file or they won't register.
The problem is that I can only see the content of that first layer. I though canvases were transparent objects so I could layer them on top of each other using a different z-index for each one.
The following is my code using ionic and easeljs, I tried to keep it as short as possible. If you run it this way you can only draw, but you don't see a cursor. If you switch out the ids layer0 and layer1 it is the other way around.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Doodle</title>
<script src="ionic.bundle.js"></script>
<script src="easeljs-0.8.1.combined.js"></script>
<script type="text/javascript">
angular.module('starter', ['ionic'])
.controller('DrawCtrl', function($scope) {
var canvas, stage;
var drawingCanvas;
var oldPt;
var oldMidPt;
canvas = document.getElementById("layer0");
//check to see if we are running in a browser with touch support
stage = new createjs.Stage(canvas);
stage.autoClear = false;
stage.enableDOMEvents(true);
createjs.Touch.enable(stage);
createjs.Ticker.setFPS(24);
drawingCanvas = new createjs.Shape();
stage.addChild(drawingCanvas);
$scope.downEvent = function() {
oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
oldMidPt = oldPt.clone();
};
$scope.dragEvent = function() {
//draw on layer0, don't clear
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);
drawingCanvas.graphics.clear().setStrokeStyle(10, 'round', 'round').beginStroke("#000000").moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;
stage.update();
};
$scope.mouseMove = function() {
//draw circle on canvas during mouse move, immediately clear layer1 again (like a cursor)
var ctx = document.getElementById('layer1').getContext('2d');
ctx.globalCompositeOperation = "source-over";
ctx.clearRect(0, 0, canvas.width, canvas.height);
var x = stage.mouseX;
var y = stage.mouseY;
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
};
})
</script>
</head>
<body ng-app="starter" ng-controller="DrawCtrl">
<canvas id="layer0" style="z-index:0; border: 1px solid black; " width="300" height="180" ng-mousemove="mouseMove()" on-touch="downEvent($event)" on-drag="dragEvent()" <="" canvas="">
<canvas id="layer1" style="z-index:1; border: 1px solid black; " width="300" height="180" <="" canvas="">
</canvas></canvas></body>
</html>
I'm just starting to learn html/javascript and would really appreciate any input!
A quick guess, but your problem is probably in your canvas HTML lines:
<canvas id="layer0" style="z-index:0; border: 1px solid black; " width="300" height="180" ng-mousemove="mouseMove()" on-touch="downEvent($event)" on-drag="dragEvent()" <="" canvas="">
<canvas id="layer1" style="z-index:1; border: 1px solid black; " width="300" height="180" <="" canvas="">
This bit at the end: <="" canvas=""> isn't quite valid. Replace those lines with:
<canvas id="layer0" style="z-index:0; border: 1px solid black; " width="300" height="180" ng-mousemove="mouseMove()" on-touch="downEvent($event)" on-drag="dragEvent()"></canvas>
<canvas id="layer1" style="z-index:1; border: 1px solid black; " width="300" height="180"></canvas>
And remove the 2 trailing </canvas></canvas>.
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.