Moving image relatively to cursor JS - javascript

I am doing this small project - my cursor moves in a left rectangle and it should appear in the second one. I have made an image of cursor and I am trying to move it according to my cursor, but nothing happens. Could you help me to find the mistake? I would be very grateful!
Here is the code snippet:
<html>
<head>
<title>Laboratory work 1_4</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#imgc{
position: absolute;
}
</style>
</head>
<body>
<img src="arrow.png" id="imgc" width="20" height="20">
<canvas id="canvas" width="800" height="600" ></canvas>
<script type="text/javascript">
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 300, 200);
ctx.stroke();
ctx.rect(350, 20, 300, 200);
ctx.stroke();
</script>
<script type="text/javascript" src="js/libs/jquery/jquery.js">
$("#canvas").mousemove(function(e){
$("#imgc").stop().animate({left:e.pageX, top:e.pageY});
});
</script>
</body>
P.S. I added jquery library in a JavaScript libraries wizard in Netbeans. So the structure of my project looks like this:

Related

Using canvas to take a picture of an image element

I wanted to take a picture of a photo I have on my webpage using a canvas to get a local url for it. Obviously, this is redundant because I already have the url for the photo, but it would be useful in other contexts (like videos). When I execute this code, a white box appears that is not the image I use for testing purpose. Where am I going wrong here?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js" defer></script>
</head>
<style>
img{
height: 500px;
width: 500px;
}
</style>
<body>
<img id="test" src="img_url">
<button onclick="takePhoto()">Click Me</button>
</body>
</html>
JS:
var width=200
var height=300
function takePhoto(){
var test = document.getElementById("test")
var canvas = document.createElement("canvas")
document.body.appendChild(canvas)
var cxt = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
cxt.drawImage(test, width, height);
var data = canvas.toDataURL('image/png');
console.log(data)
}
The 3 params version of drawImage() is
drawImage(source, x, y);
You did set the x and y params to the width and height of the canvas, which means the browser will draw the image from the bottom right corner of the canvas, which obviously doesn't do much.
You probably wanted the 5 params version
drawImage(source, x, y, resizeWidth, resizeHeight);
Where you'd set x and y to 0.

How to turn an html canvas into an image and then draw that canvas onto the canvas

I'm currently working on an html canvas javascript game, and it's just about finished, but I want to scale up the canvas so the whole game is bigger. I tried using something like
var imgData = ctx.getImageData(0, 0, 300, 500);
ctx.putImageData(imgData,0,0,0,0,360,600)
but using this method I couldn't increase the size of the image. What is the best method for this?
There are multiple ways you can achieve this, the two that i've experimented with would use 2 seperate canvases, putImageData is a little weird, and does not work well for scaling up, what i would recommend, is have a separate canvas, the size of the scaled up version, and then use ctx.drawImage to draw the first canvas on the scaled up version:
var c = document.getElementById('c');
var ctx = c.getContext('2d');
var c2 = document.getElementById('c2');
var ctx2 = c2.getContext('2d')
ctx.fillStyle = "red";
ctx.fillRect(10,10,100,100)
var scaleX = c2.width / c.width;
var scaleY = c2.height / c.height;
ctx2.drawImage(c,0,0,c2.width,c2.height)
canvas{
border: 2px solid black
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<canvas id="c" width="200" height="200"></canvas>
<canvas id="c2" width="400" height="400" ></canvas>
<script src="script.js"></script>
</body>
</html>
The other way is to just scale up the context, then draw the image at 0,0, with no width or height specified:
var c = document.getElementById('c');
var ctx = c.getContext('2d');
var c2 = document.getElementById('c2');
var ctx2 = c2.getContext('2d')
ctx.fillStyle = "red";
ctx.fillRect(10,10,100,100)
var scaleX = c2.width / c.width;
var scaleY = c2.height / c.height;
ctx2.scale(scaleX,scaleY)
ctx2.drawImage(c,0,0)
ctx2.scale(1/scaleX,1/scaleY)
canvas{
border: 2px solid black
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<canvas id="c" width="200" height="200"></canvas>
<canvas id="c2" width="400" height="400" ></canvas>
<script src="script.js"></script>
</body>
</html>
One more option is to use the css scale() tag, but that messes with mouse clicks, and is really annoying so i wouldn't do that. Keep in mind, all methods that scale up the canvas (unless your scaling up coordinates and redrawing), will result in blur.
Hope this helps :D

Can't change color on an image drawing canvas

I have created an image drawing canvas but the drawing color can't change. maybe it's javascript set color but can't find. if anyone knows please help me. this is the demo link
http://affibe.com/erevo/
HTML Code:
`
<html class="gr__adsterra_com">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/pixi.min.js"></script>
<script type="text/javascript" src="js/animationFrame.js"></script>
<script type="text/javascript" src="js/nodes.js"></script>
<style>body{margin: 0; background-color: transparent;}</style>
</head>
<body data-gr-c-s-loaded="true">
<header>
<script>lowPerformance=function (){var ua=navigator.userAgent.toLowerCase(); if (ua.indexOf("iphone") !=-1 || ua.indexOf("mobile") !=-1) return true; if ($(window).width()==0) return; return ($(window).width() <=480) ? true : false;}; var ie=false; var w=window, d=document, documentElement=d.documentElement, body=d.getElementsByTagName('body')[0], height=w.innerHeight|| documentElement.clientHeight|| body.clientHeight; if (navigator.appName=='Microsoft Internet Explorer') ie=true; Nodes.multipleInit([{"post_name": "AFFIBE", "drawnImage": (height>860)?"http:\/\/affibe.com\/erevo\/images\/main\/logo_header_er.png":"http:\/\/affibe.com\/erevo\/images\/main\/logo_header_er.png", "linkTitle": "AFFIBE", "particleDensity": ie?"11":"7", "particleWidth": "0.5", "particleHeight": "0.5"}]); </script>
</header>
</body>
</html>
pixi.min.js:
http://affibe.com/erevo/js/pixi.min.js
animationFrame.js
!function(){for(var n=0,i=["ms","moz","webkit","o"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),a=Math.max(0,16-(e-n)),o=window.setTimeout(function(){i(e+a)},a);return n=e+a,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(n){clearTimeout(n)})}();
if i understand it the follow code help to you
var c = document.getElementById("canvas");
var ctx= c.getContext("2d");
ctx.fillStyle="#66bfff";
for example
var c = document.getElementById('canvas');
var ctx = c.getContext("2d");
ctx.fillStyle = "#f00";
ctx.fillRect(40, 40, 40, 40);
#canvas{
border: 2px solid #333;
}
<html>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
</body>
</html>

html 5 function not executed?

I am working through a book called "Beginning Facebook Game Apps Dev" and in Chapter 3 they introduce us to create code for html document.
I'm on a Mac and I use TextEdit to create the pages. At first the book gave code to draw a rectangle and a triangle. Both were fine but then I try the code rotation, it only displays the box.
I have been programming for some time now with c++ without being an expert but I know absolutely nothing yet on how the internet works. Anyway the only difference I can see between the code that works and the one that doesn't is the fact to rotate I call functions where for the rectangle I dont. Could anyone tell me what is going on please?
ps: I tried to google html 5 function not working but honestly I'm at a loss for words on how to search for this specific problem.
thank you
code working (draw rectangle)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>A simple Canvas Square</title>
<style type="text/css" media="screen">
#canvas
{
border: 1px solid #c0c0c0;
}
</style>
</head>
<body>
<canvas id="canvas" width="270" height="270"></canvas>
<script type="text/javascript" charset="utf-8">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = "gray";
context.fillRect(30, 30, 200, 200);
</script>
</body>
</html>
code not working (rotation)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>overlapping box</title>
<style type="text/css" media="screen">
#canvas
{
border: 1px solid #c0c0c0;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script type="text/javascript" charset="utf-8">
function draw(canvas Id)
{
"use strict";
var canvas = document.getElementById(canvasId);
var context = canvas.getContext("2d");
context.fillStyle = "#091F5D";
context.fillRect(10, 10, 160, 150);
context.fillStyle = "rgba(255, 78, 0, 0.5)";
context.fillRect(90, 90, 160, 150);
context.fillStyle = "rgb(255, 78, 0)";
context.fillRect(170, 160, 160, 150);
}
draw('canvas');
</script>
</body>
</html>
in this line:
function draw(canvas Id)
you should not have a space between the words 'canvas' and 'Id'. Change it to:
function draw(canvasId)
canvasId is the name of the parameter (with the value passed being the id of the canvas element in which you want to draw the rectangles).

Why can't I draw a rectangle in my HTML5 canvas?

I am trying to draw a red rectangle on my HTML5 canvas. Here is my HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>My Canvas Experiment</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="plotting.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<canvas id="plot"></canvas>
</body>
</html>
Here is plotting.js:
document.onload = function() {
var c = document.getElementById("plot");
var ctx = c.getContext("2d");
ctx.fillStyle("#f00");
ctx.fillRect(0, 0, 175, 40);
}
Here is main.css:
body { margin:100px; }
article, aside, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
#plot {
width: 500px;
height: 400px;
}
Why is the page blank? Chrome Web Developer Console issues no errors.
Replace:
ctx.fillStyle("#f00");
with:
ctx.fillStyle="#f00";
Use window.onload instead of document.onload, (keeping #stewe's suggestion).
DEMO
Replacectx.fillStyle('#f00'); to ctx.fillStyle = 'red'; because fillStyle is a variable and NOT the function.
I've been having issues all morning with javascript not drawing my shapes. Turns out you HAVE to set the width and height on the canvas tag in HTML, and not through the CSS, or the shapes will not draw.
example:
<canvas id="map" width="500" height="500"></canvas>

Categories