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>
This is my code for the roulette. It spins and stops with the button but I need it something to tell me how far the user was from the green pocket after they pressed stop. It has to be measured in angles.
<html>
<head>
<body>
<input type="button" value="START" style="bottom: auto" onClick="spinning()">
<input type="button" value="STOP" style="bottom: auto" onClick="stop()">
<p>
Spin the roulette and try to get it to land on the green pocket as accurately as possible.
</p>
<canvas id="newCanvas" width="1000" height="1000"></canvas>
<script>
"use strict";
var a = document.getElementById("newCanvas");
var c = a.getContext("2d");
var increaseAngle=0;
c.beginPath();
c.arc(200,200,195,0,2*Math.PI);
c.fillStyle="black"
c.fill();
spinning();
function spinning() {
increaseAngle+=0.08;
for (var i=0; i<20; i++) {
var angleSize=2*Math.PI/20;
c.beginPath();
c.moveTo(200,200);
c.arc(200,200,180, angleSize * i+increaseAngle, angleSize * (i+1)+increaseAngle);
c.lineTo(200,200);
c.fillStyle="black"
c.fill();
if (i%2 == 0) {
c.fillStyle="red"
c.fill();
}
}
if (i%2==0){
c.fillStyle="green"
c.fill();
}
angleSize++;
pause = window.setTimeout(spinning,17)
}
var pause;
function stop() {
clearTimeout(pause);
}
//arrow
c.beginPath();
c.rect(190,0,25,60);
c.fillStyle="yellow";
c.fill();
</script>
</body>
</head>
</html>
I just have to add a function to this that can measure the distance.
Good day,
I have a problem with the canvas. I'm using boostrap and I'd like to show some graphics. I have this:
<div id="charts" class="tab-pane fade">
<div class="container-fluid-charts onload="init();">
<div id="container1" style="width: 100%; height: 400px; margin: 0 auto;border: 1px solid black;background-color: white;"></div>
<canvas id="chart1">Your browser cannot display the charts...</canvas>
</div>
</div>
The Javascript is composed like this:
function init() {
var c = document.getElementById("chart1");
var ctx1 = c.getContext('2d');
drawChart1();
}
function drawChart1() {
ctx1.moveTo(ctx.canvas.width / 2 , 0);
ctx1.lineTo(0, ctx.canvas.height);
ctx1.stroke();
ctx1.beginPath();
ctx1.arc(95,50,40,0,2*Math.PI);
ctx1.stroke();
ctx1.font = "30px Arial";
ctx1.fillText("Hello World",10,50);
}
I have no errors showing and the canvas is empty. I think it's related to the DOM... Anyone can help me please ?
You declare the local variable var ctx1 = ... within the context of the init() function. You cannot access it outside that function. Thus, accessing ctx1 within drawChart1() fails.
Also, within drawChart1(), you are accessing a ctx variable which hasn't been declared anywhere.
You are missing a quote closing the class="... attribute.
Also, the <div> element doesn't support the onload attribute: How to add onload event to a div element?
A better solution is to pass the context ctx as a parameter to the drawChart1(ctx) function. Placing your script below all relevant DOM elements makes the onload handler superfluous:
<div id="charts" class="tab-pane fade">
<div class="container-fluid-charts">
<div id="container1" style="width: 100%; height: 400px; margin: 0 auto;border: 1px solid black;background-color: white;"></div>
<canvas id="chart1">Your browser cannot display the charts...</canvas>
</div>
</div>
<script>
function drawChart1(ctx) {
ctx.moveTo(ctx.canvas.width / 2, 0);
ctx.lineTo(0, ctx.canvas.height);
ctx.stroke();
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
}
var c = document.getElementById("chart1");
var ctx = c.getContext('2d');
drawChart1(ctx);
</script>
So to stay trained during the summer holliday I decided I wanted to convert an existing windows forms application into a web api application.
With the tool I am trying to make you can make UML use cases and diagrams. I decided to use HTML5 canvas, Javascript and bootstrap to do the job.
The issue I'm having is that the actors should be drawn one at a time when a radiobutton is checked but when I try to do this condtionally it prints three actors when the document is ready instead of wating untill the 2 radiobuttons are checked.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<script src="js/drawfigure.js"></script>
<body>
<div class="container">
<div class="col-md-4">
<fieldset id="group1">
<h2>Elementen</h2>
<div class="radio">
<label class="radio-inline"><input type="radio" value="Actor" id="rbActor" name="optradioElementen">Actor</label>
</div>
<div class="radio">
<label class="radio radio-inline"><input type="radio" id="rbLine" value="Line" name="optradioElementen">Line</label>
</div>
<div class="radio">
<label class="radio radio-inline"><input type="radio" id="UseCase" value="UseCase" name="optradioElementen">Use Case</label>
</div>
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<div>
<h2>Modes</h2>
<div class="radio">
<label class="radio control-label"><input type="radio" value="Create" id="rbCreate"
name="optradioModes">Create</label>
</div>
<div class="radio">
<label class="radio control-label"><input type="radio" value="Select" id="rbSelect"
name="optradioModes">Select</label>
</div>
</div>
</fieldset>
</div>
<div class="col-md-2 col-md-offset-2">
<h2>verwijderen</h2>
<button class="btn btn-default">Clear All</button>
<button class="btn btn-default">Remove</button>
</div>
</div>
<div class="container" style="position:relative;">
<canvas id="thecanvas" width="800" height="800">
</canvas>
</div>
<!--myModal-->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="false">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form>
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>
and this is my javascript / jquery
$(document).ready(function() {
var canvas = document.getElementById("thecanvas");
var ctx = canvas.getContext('2d');
function drawEllipseOnPosition(event) {
var x = event.x - 400;
var y = event.y - 150;
drawEllipseWithBezierByCenter(ctx, x, y, 200, 60, '#0099ff', "Jeff");
}
function drawActor(startX, startY) {
if (canvas.getContext("2d")) { // Check HTML5 canvas support
context = canvas.getContext("2d"); // get Canvas Context object
context.beginPath();
context.fillStyle = "bisque"; // #ffe4c4
context.arc(startX, startY, 30, 0, Math.PI * 2, true); // draw circle for head
// (x,y) center, radius, start angle, end angle, anticlockwise
context.fill();
context.beginPath();
context.strokeStyle = "red"; // color
context.lineWidth = 3;
context.arc(startX, startY, 20, 0, Math.PI, false); // draw semicircle for smiling
context.stroke();
// eyes
context.beginPath();
context.fillStyle = "green"; // color
context.arc(startX - 10, startY - 5, 3, 0, Math.PI * 2, true); // draw left eye
context.fill();
context.arc(startX + 10, startY - 5, 3, 0, Math.PI * 2, true); // draw right eye
context.fill();
// body
context.beginPath();
context.moveTo(startX, startY + 30);
context.lineTo(startX, startY + 130);
context.strokeStyle = "navy";
context.stroke();
// arms
context.beginPath();
context.strokeStyle = "#0000ff"; // blue
context.moveTo(startX, startY + 30);
context.lineTo(startX - 50, startY + 80);
context.moveTo(startX, startY + 30);
context.lineTo(startX + 50, startY + 80);
context.stroke();
// legs
context.beginPath();
context.strokeStyle = "orange";
context.moveTo(startX, startY + 130);
context.lineTo(startX - 50, startY + 230);
context.moveTo(startX, startY + 130);
context.lineTo(startX + 50, startY + 230);
context.stroke();
}
}
function drawEllipseWithBezierByCenter(ctx, cx, cy, w, h, style, text) {
drawEllipseWithBezier(ctx, cx - w / 2.0, cy - h / 2.0, w, h, style, text);
}
function drawEllipseWithBezier(ctx, x, y, w, h, style, text) {
var kappa = .5522848,
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
ctx.save();
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.font = '20pt Calibri';
ctx.fillText(text, x + 25, y + 35);
if (style)
ctx.strokeStyle = style;
ctx.stroke();
ctx.restore();
}
canvas.addEventListener("click", drawEllipseOnPosition, false);
var i = 0;
if($("input[value='Actor']").is(":checked")){
if($("input[value='Create']:checked"){
while(i < 3){
if(i==0){
drawActor(100, 550);
}
if(i == 1){
drawActor(100, 300);
}
if( i == 2){
drawActor(100, 50);
}
i++;
}
}
}
});
Any help would be very much appreciated!
You can "jump out" of a loop using break.
var i = 0;
if ($("input[value='Actor']").is(":checked") && $("input[value='Create']:checked")) {
while (i < 3) {
if (i == 0) {
drawActor(100, 550);
break;
}
if (i == 1) {
drawActor(100, 300);
break;
}
if (i == 2) {
drawActor(100, 50);
break;
}
i++;
}
}
I have made code for a bouncing ball (using the arc() method on a canvas). I am wondering how to make an image bounce around the screen. Here is my previous code (note that the launchBall() function is going to be the function that runs the bouncing image):
<!DOCTYPE HTML>
<html>
<body onload="startBall()" oncontextmenu="return false;" style="cursor: none; overflow: hidden;">
<center>
<div id="div" style="width: 1600px; height: 700px; border: 2px solid #000000; background-color: grey;">
<br>
<img draggable="false"id="image" style="position: absolute;" width="50" height="50"src="http://www.clker.com/cliparts/b/a/b/0/1207156679935151925noxin_crosshairs.svg.hi.png"/>
</div>
<center>
<p>Score: <a>0</a></p>
</center>
<script>
var dx = 3;
var dy = 3;
var x = 100;
var y = 100;
var radius = 20;
var interval;
function startBall(){
interval = setInterval(launchBall, 20);
}
function launchBall(){
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 1275, 695);
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
document.getElementById
if(x<20 || x>1255) dx=-dx;
if(y<20 || y>675) dy=-dy;
x = x + dx;
y = y + dy;
}
document.getElementById("div").onmousemove = function(e) {
document.getElementById("image").style.top = e.pageY -25 + "px";
document.getElementById("image").style.left = e.pageX -25 +"px";
}
</script>
</body>
</html>