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>
Related
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>
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>.
<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();