As i was going through canvas tutorial, i am getting error:" Point is not defined" and My actual output differs from expected output.Iam not able to drag the circle with mouse.
ReferenceError: Point is not defined in logic.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing Circles in Canvas</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body width="100%" height="100%">
<header>
<h1>Drawing in Canvas</h1>
</header>
<canvas id="game" width="768" height="400">
Sorry, your web browser does not support
Canvas content.
</canvas>
<script src="js/jquery-1.10.2.min.js">
</script>
<script src="js/logic.js"></script>
</body>
</html>
logic.js
var untangleGame={
circle: [],
thinLineThickness: 1,
lines: []
};
function Circle(x,y,radius){
this.x=x;
this.y=y;
this.radius=radius;
}
function Line(startPoint,endPoint,thickness){
this.startPoint=startPoint;
this.endPoint=endPoint;
this.thickness=thickness;
}
function drawcircle(ctx,x,y,radius){
ctx.fillStyle="rgba(200,200,100,.9)";
ctx.beginPath();
ctx.arc(x,y,radius,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
function connectCircles(){
for(var i=0;i<untangleGame.circle.length;i++){
var startPoint=untangleGame.circle[i];
for(var j=0;j<i;j++){
var endPoint=untangleGame.circle[j];
untangleGame.lines.push(new
Line(startPoint,endPoint,untangleGame.thinLineThickness));
}
}
}
function drawLine(ctx,x1,y1,x2,y2,thickness){
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineWidth=thickness;
ctx.strokeStyle="#cfc";
ctx.stroke();
}
function clear(ctx){
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
}
$(function(){
var canvas=document.getElementById('game');
var ctx=canvas.getContext('2d');
var circleRadius=10;
var width=canvas.width;
var height=canvas.height;
var circlesCount=5;
for(var i=0;i<circlesCount;i++){
var x=Math.random()*width;
var y=Math.random()*height;
drawcircle(ctx,x,y,circleRadius);
untangleGame.circle.push(new Circle(x,y,circleRadius));
}
connectCircles();
$("#game").mousedown(function(e){
var canvasPosition=$(this).offset();
var mouseX=e.layerX || 0;
var mouseY=e.layerY || 0;
for(var i=0;i<untangleGame.circle.length;i++){
var circleX=untangleGame.circle[i].x;
var circleY=untangleGame.circle[i].y;
var radius=untangleGame.circle[i].radius;
if(Math.pow(mouseX-circleX,2)+Math.pow(mouseY-circleY,2)
<Math.pow(radius,2)){
untangleGame.targetCircle=i;
break;
}
}
});
$("#game").mousemove(function(e){
if(untangleGame.targetCircle != undefined){
var canvasPosition=$(this).offset();
var mouseX=e.layerX || 0;
var mouseY=e.layerY || 0;
var
radius=untangleGame.circle[untangleGame.targetCircle].radius;
untangleGame.circle[untangleGame.targetCircle]=new
Circle(mouseX,mouseY,radius);
}
connectCircles();
});
$("#game").mouseup(function(e){
untangleGame.targetCircle=undefined;
});
setInterval(gameloop,30);
});
function gameloop(){
var canvas=document.getElementById('game');
var ctx=canvas.getContext('2d');
clear(ctx);
for(var i=0;i<untangleGame.lines.length;i++){
var line=untangleGame.lines[i];
var startPoint=line.startPoint;
var endPoint=line.endPoint;
var thickness=line.thickness;
drawLine(ctx,startPoint.x,startPoint.y,endPoint.x,endPoint.y,thickness);
}
for(var i=0;i<untangleGame.circle.length;i++){
var circle=untangleGame.circle[i];
drawcircle(ctx,point.x,point.y,circle.radius);
}
}
style.css
canvas{
background: #333;
}
Output Expected:
Output expected of Image link O/p Expected link
Looks like you are using point instead of circle in the for loop in gameloop
for (var i = 0; i < untangleGame.circle.length; i++) {
var circle = untangleGame.circle[i];
drawcircle(ctx, circle.x, circle.y, circle.radius);
}
Demo: Fiddle
Related
Whenever i insert a video it appears a black frame instead of a frame from the video.
The js function "handleFiles" validates if the file inserted is a video. Then creates a video element that after is loaded takes a snap from the video after 10s using canvas. Then with that snap attach the image to the table along with the name of the file
var Video = ['m4v', 'avi','mpg','mp4', 'webm', 'mov', 'mxf'];
var NameFile = [];
function handleFiles() {
"use strict";
var inputElement = document.getElementById("input");
var fileList = inputElement.files; /* now you can work with the file list */
for(var k = 0; k < fileList.length; k++){
NameFile.push(fileList[k].name);
}
for( var j=0; j<100; j++){
for(var i = 0; i < fileList.length; i++){
// VIDEOS
if(fileList[i].type === "video/"+Video[j]){
var video = document.createElement('video');
var timeupdate = function() {
if (snapImage()) {
video.removeEventListener('timeupdate', timeupdate);
video.pause();
}
};
video.addEventListener('loadeddata', function() {
if (snapImage()) {
video.removeEventListener('timeupdate', timeupdate);
}
});
var snapImage = function() {
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var image = canvas.toDataURL();
var success = image.length > 100000;
if (success) {
var img = document.createElement('img');
img.src = image;
document.getElementsByTagName('div')[0].appendChild(img);
}
return success;
};
video.addEventListener('timeupdate', timeupdate);
video.preload = 'metadata';
video.src=(window.URL.createObjectURL(fileList[i]).replace('blob:',''));
// Load video in Safari / IE11
video.muted = true;
video.playsInline = true;
video.play();
// Table for Videos
for( var lV=0; lV<100; lV++ ){
// if for name
if(fileList[i].name===NameFile[lV]){
var Vx = document.createElement("Table");
Vx.setAttribute("id", "galeriaV" + (i));
document.body.appendChild(Vx);
// imagens of videos
var VImg = document.createElement("tr");
VImg.setAttribute("id", "VTr" +(i));
document.getElementById("galeriaV" +(i)).appendChild(VImg);
var ImgV = document.createElement("td");
var imagV =document.createElement("img");
imagV.src = snapImage;
imagV.height = 50;
imagV.with = 50;
imagV.setAttribute("id", "imageID" +(i));
imagV.setAttribute("className", "bordered");
imagV.setAttribute("src","http://placehold.it/200/200/pink/black");
imagV.setAttribute("onclick","imgClick(this)");
ImgV.appendChild(imagV);
document.getElementById("VTr" + (i)).appendChild(ImgV);
// files names
var yV = document.createElement("tr");
yV.setAttribute("id", "VNTr" + (i));
document.getElementById("galeriaV" +(i)).appendChild(yV);
var Vz = document.createElement("td");
var Vt = document.createTextNode(NameFile[lV]);
Vz.appendChild(Vt);
document.getElementById("VNTr" + (i)).appendChild(Vz);
}// fim if name
}
}
}
}
}
<!doctype html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="../JS/galeria.js"> </script>
<script src="../JS/XML.js"> </script>
<title>Preview images</title>
<style>
input{
display: inline-block;
float: left;
width:100%;
}
table{
margin-top: 10px;
border: 0px solid #ddd;
padding: 8px;
display: inline-block;
text-align: left;
}
table.tr{
width: 50px;
height: 50px;
}
img.bordered{
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Upload images ...</h2>
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
</body>
</html>
The snippet gives an error at the img Click function is not defined but thats not the problem
Here is my HTML code:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
</canvas>
<script src="pro checkers.js"></script>
</body>
</html>
Here is my JavaScript code:
class Board {
var ct = document.getElementById("myCanvas");
var c = ct.getContext("2d");
function Draw_board()
{
c.fillStyle = "rgb(220,220,220)";
c.fillRect(0,0,600,600);
c.fillStyle = "rgb(50,50,50)";
for (i=0;i<4;i++)
{
for (j=0;j<4;j++)
{
c.fillRect(i*150,j*150,75,75);
}
}
for (i=0;i<4;i++)
{
for (j=0;j<4;j++)
{
c.fillRect(i*150+75,j*150+75,75,75);
}
}
}
}
class Pices {
Update();
var Pices = ["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""];
var Face_pices = ["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""];
function Update()
{
Draw_board();
Draw_pices();
}
function Draw_pices()
{
c.beginPath();
c.arc(95,50,40,0,2*Math.PI);
c.stroke();
}
}
The error is where the canvas is defined in javascript here:
var ct = document.getElementById("myCanvas");
var c = ct.getContext("2d");
It says:
pro checkers.js:2 Uncaught SyntaxError: Unexpected identifier
I am trying to make a checkers engine and this is the start but it is not working what is wrong?
Thanks!
I am trying to clone several svgs from the same data, but when I apply a colour to one of them it also applies to the others as well. I'm not sure I am cloning the svg correctly. Here is my code:
var canvas = new fabric.Canvas('canvas');
var svgObject = null;
fabric.loadSVGFromURL("http://fabricjs.com/assets/131.svg", function(objects, options) {
svgObject = fabric.util.groupSVGElements(objects, options);
var object1 = fabric.util.object.clone(svgObject);
colourSVG(object1, "rgb(0,0,0)", "rgba(151,0,0,1)");
canvas.add(object1);
var object2 = fabric.util.object.clone(svgObject);
object2.top = 200;
canvas.add(object2).renderAll();
});
function colourSVG(_obj, _keyColourString, _fillColourString){
if (!_obj.paths) {
_obj.setFill(_fillColourString);
}
else if (_obj.paths) {
for (var i = 0; i < _obj.paths.length; i++) {
if(_obj.paths[i].fill === _keyColourString){
_obj.paths[i].setFill(_fillColourString);
console.log("colour found");
}
else{
console.log(_obj.paths[i].fill);
}
}
}
}
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" width="800" height="500" ></canvas>
I think you were just cloning the objects incorrectly.
var canvas = new fabric.Canvas('canvas');
var svgObject = null;
fabric.loadSVGFromURL("http://fabricjs.com/assets/131.svg", function(objects, options) {
svgObject = fabric.util.groupSVGElements(objects, options);
svgObject.clone(function(o) {
colourSVG(o, "rgb(0,0,0)", "rgba(151,0,0,1)");
canvas.add(o);
});
svgObject.clone(function(o) {
o.top = 200;
canvas.add(o);
});
canvas.renderAll();
});
function colourSVG(_obj, _keyColourString, _fillColourString) {
if (!_obj.paths) {
_obj.setFill(_fillColourString);
} else if (_obj.paths) {
for (var i = 0; i < _obj.paths.length; i++) {
if (_obj.paths[i].fill === _keyColourString) {
_obj.paths[i].setFill(_fillColourString);
console.log("colour found");
} else {
console.log(_obj);
console.log(_obj.paths[i].fill);
}
}
}
}
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" width="800" height="500"></canvas>
I have a block of code as the following
<body id="main">
<h1>Matching Game</h1>
<p>Click on the extra smile face on the left</p>
<div id="left_side"></div>
<div id="right_side"></div>
<script>
var theLeftSide = document.getElementById("left_side");
var theRightSide = document.getElementById("right_side");
theLeftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
quan+=5;
dele();
generateFace();
}
</script>
</body>
This line theLeftSide.lastChild.onclickwill throw an error, saying that "cannot set property 'onclick' of null", because at the time javascript engine scans through it, it hasn't has any child yet. This problem can be solved by putting this code inside $(document).ready, I know.
However, I also tried IIFE, which means that wrapping all those code inside
(function(){
var theLeftSide = document.getElementById("left_side");
var theRightSide = document.getElementById("right_side");
theLeftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
quan+=5;
dele();
generateFace();
}
})()
and also see that the problem is fixed, but cannot figure out why. Any one can explain me ?
Here's the full original code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>part4</title>
<style>
div{
position:absolute;
}
#left_side{
width:500px; height: 500px; border-right:#000 thin inset;
float: left;
}
#right_side{
width:500px; height: 500px;
float:left; left:500px;
}
img{
position: absolute;
}
body{
margin:0px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>
<body onload="generateFace()" id="main">
<h1>Matching Game</h1>
<p>Click on the extra smile face on the left</p>
<div id="left_side"></div>
<div id="right_side"></div>
<script>
var theLeftSide = document.getElementById("left_side");
var theRightSide = document.getElementById("right_side");
var e = event;
var theBody= document.getElementById("main");
var post_left =0;
var post_top=0;
var quan = 4;
function generateFace(){
var i =0;
for(i=0; i<= quan; i++){
var img = document.createElement("img");
img.src="smile.png"; post_top=getRandom(); post_left=getRandom();
img.style.top = post_top + "px";
img.style.left = post_left +"px";
theRightSide.appendChild(img);
var clone = img.cloneNode(true);
theLeftSide.appendChild(clone);
}
//var clone = theRightSide.cloneNode(true);
//theLeftSide.appendChild(clone);
var extra = document.createElement("img");
extra.src="smile.png"; post_top=getRandom(); post_left=getRandom();
extra.style.top = post_top + "px";
extra.style.left = post_left +"px";
theLeftSide.appendChild(extra);
};
function getRandom(){
var i = Math.random() * 400 +1;
return Math.floor(i);
};
function dele(){
while(theLeftSide.firstChild != null){
theLeftSide.removeChild(theLeftSide.firstChild);
}
while(theRightSide.firstChild != null){
theRightSide.removeChild(theRightSide.firstChild);
}
};
theBody.onclick = function gameOver() {
alert("Game Over!");
dele();
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
function nextLevel(event){
event.stopPropagation();
quan+=5;
delse();
generateFace();
}
</script>
</body>
</html>
and with IIFE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>part4</title>
<style>
div{
position:absolute;
}
#left_side{
width:500px; height: 500px; border-right:#000 thin inset;
float: left;
}
#right_side{
width:500px; height: 500px;
float:left; left:500px;
}
img{
position: absolute;
}
body{
margin:0px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>
<body id="main">
<h1>Matching Game</h1>
<p>Click on the extra smile face on the left</p>
<div id="left_side"></div>
<div id="right_side"></div>
<script>
(function(){
var theLeftSide = document.getElementById("left_side");
var theRightSide = document.getElementById("right_side");
var e = event;
var theBody= document.getElementById("main");
var post_left =0;
var post_top=0;
var quan = 4;
generateFace();
function generateFace(){
var i =0;
for(i=0; i<= quan; i++){
var img = document.createElement("img");
img.src="smile.png"; post_top=getRandom(); post_left=getRandom();
img.style.top = post_top + "px";
img.style.left = post_left +"px";
theRightSide.appendChild(img);
var clone = img.cloneNode(true);
theLeftSide.appendChild(clone);
}
//var clone = theRightSide.cloneNode(true);
//theLeftSide.appendChild(clone);
var extra = document.createElement("img");
extra.src="smile.png"; post_top=getRandom(); post_left=getRandom();
extra.style.top = post_top + "px";
extra.style.left = post_left +"px";
theLeftSide.appendChild(extra);
};
function getRandom(){
var i = Math.random() * 400 +1;
return Math.floor(i);
};
function dele(){
while(theLeftSide.firstChild != null){
theLeftSide.removeChild(theLeftSide.firstChild);
}
while(theRightSide.firstChild != null){
theRightSide.removeChild(theRightSide.firstChild);
}
};
theBody.onclick = function gameOver() {
alert("Game Over!");
dele();
//theBody.onclick = undefined;
//theLeftSide.lastChild.onclick = undefined;
};
theLeftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
quan+=5;
dele();
generateFace();
}
})();
</script>
</body>
</html>
In the original piece of code, generateFace() is called on page load. In the second piece of code, generateFace() is called directly. There is no relation with the IIFE. Please forget it! :-P Here is a simplified version of what you are doing in each case (open your browser console before running the snippets):
Original code (throws a TypeError)
console.log('attempting to initialize onclick');
document.getElementById('clickable').onclick = function () {
alert(this.id);
};
console.log('onclick initialized successfully');
function gendiv () {
console.log('gendiv was called');
document.body.innerHTML = '<div id="clickable">click me</div>';
}
<body onload="gendiv()"></body>
Modified code
gendiv();
console.log('trying to initialize onclick');
document.getElementById('clickable').onclick = function () {
alert(this.id);
};
console.log('onclick initialized successfully');
function gendiv () {
console.log('gendiv was called');
document.body.innerHTML = '<div id="clickable">click me</div>';
}
<body></body>
I'm attempting to draw boxes onto a canvas using JavaScript; my code works, but I'm having trouble with my arrays. Say I have a multi-demensional array called map and it is declared like so:
var map = [
[0,1,1],
[0,0,1],
[0,1,1],
];
Where 1 is a box and 0 is blank space, but when I run my code the output looks like the following:
0,0,0
1,0,1
1,1,1
Is there any way to fix this so the output matches map? My code looks like this:
var canvas = null;
var ctx = null;
var x,y,count,inc,ax,ay;
var map = [
[0,0,0],
[1,0,1],
[1,1,1],
];
window.onload = function () {
canvas = document.getElementById("gameArea");
ctx = canvas.getContext("2d");
y=0;
x=0;
ax=0;
ay=0;
count=0;
inc=0;
for(;count<3;count++){
if(count>0){
inc = inc + 40;
console.log("inc:"+inc);
console.log();
}
ay=count;
console.log("ay:"+ay);
console.log();
y = y + inc;
console.log("y:"+y);
console.log();
for(;ax<3;x=x+40,ax++){
if(map[ax][ay]==1){
console.log(ax+","+ay)
console.log(map[ax][ay]);
console.log();
ctx.strokeRect(x,y,40,40);
console.log("block:"+x+","+y);
}
}
console.log();
x=0;
y=0;
ax=0;
}
};
And the HTML is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single Stage</title>
<script src="js/game.js" type="text/javascript">
</script>
<style type="text/css">
#gameArea{
display:block;
margin:0 auto;
background-color:#FFFFFF;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameArea" width='800' height='480'></canvas>
</body>
</html>
You've just mixed up your rows and columns
try switching map[ax][ay]==1 to map[ay][ax]==1