Draw a rotating circle over previous canvas - javascript

I'm trying to draw a rotating circle over another canvas.
I've managed to draw the circle, but once it rotates it fills everything inside the rotating radius white and the circle becomes a big continuous circle.
I just want a small circle rotating around the canvas center like a planet around the sun.
This is just example code in my real code the red rectangle is a roulette wheel that rotates in the opposite direction this is the reason why I have two canvas.
I need the (ball) to be white this is why I tried to use .fillstyle and fill() but it doesn't works how I want.
Here is my code:
<html>
<head>
</head>
<body>
<style>
#container { position: relative; }
.canvas { position: absolute; top: 0; left: 0; }
</style>
<div id = 'container'>
<canvas class = "canvas" id= "rectangleCanvas" width = "500" height= "500" style = "z-index : 1" ></canvas>
<canvas class = "canvas" id= "ballCanvas" width = "500" height= "500" style = "z-index : 2"></canvas>
</div>
<script type="text/javascript">
function drawRectangle(){
var canvas = document.getElementById("rectangleCanvas")
ctx = canvas.getContext("2d");
ctx.fillStyle = 'red';
ctx.fillRect(0,0,500,500);
};
drawRectangle();
function drawBall(){
var canvas = document.getElementById("ballCanvas");
if(canvas.getContext){
ctx2 = canvas.getContext("2d");
ctx2.strokeStyle = 'black';
ctx2.fillStyle = 'white';
ctx2.clearRect(0, 0, 500, 500);
ctx2.translate(250,250);
ctx2.rotate(Math.PI / -180);
ctx2.translate(-250, -250);
ctx2.arc(250,65,10,0,2*Math.PI);
ctx2.stroke();
ctx2.fill();
}
}
setInterval(drawBall,5);
</script>
</body>
Can somebody help please?

insert
ctx2.beginPath();
before the ctx2.clearRect(0, 0, 500, 500);

All you need is to redraw the recrangle each step of the timer. This is how canvas works.

Related

HTML Canvas - bizzarre results [duplicate]

This question already has answers here:
Canvas is stretched when using CSS but normal with "width" / "height" properties
(10 answers)
Closed 4 years ago.
function Start() {
DrawViewDist();
DrawFoV();
}
function DrawFoV() {
var c = document.getElementById("roomCanvas1");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#f0f";
ctx.lineWidth=1;
ctx.beginPath();
ctx.moveTo(150, 113);
ctx.lineTo(123,16);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(150, 113);
ctx.lineTo(175,16);
ctx.stroke();
}
function DrawViewDist() {
var c = document.getElementById("roomCanvas1");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#ff0";
ctx.lineWidth=1;
ctx.beginPath();
ctx.moveTo(150, 113);
ctx.lineTo(150,16);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(1, 1);
ctx.lineTo(299,149);
ctx.stroke();
}
body {
background-color: #802828;
color: #fff;
}
#roomCanvas1 {
height: 600px;
width: 800px;
padding: 0;
border: 1px solid #0f0;
}
<!DOCTYPE html>
<html>
<head>
<title>Canvas Test</title>
</head>
<body onload="Start()">
<div id="main">
<canvas id="roomCanvas1">Your browser does not support HTML5 canvas drawings.</canvas>
</div>
</body>
</html>
I'm trying to draw lines using a canvas. The canvas is set to 800x600 and I have a 1 px border around it so I can see that it really IS 800x600 - but when I try to draw the lines, I have to pretend that the canvas is 300x150 in order to have the lines start/end in the right places. On top of that, the lines are much thicker than they should be - and they're blurry! I started with the code from W3Schools and just modified it. Everything works fine (using the same browser) in their TryIt editor so I can't imagine what the problem is.
This is a common problem that I have had in the past. Just set the canvas.width = 800 and canvas.height = 600. The canvas's height and width are naturally 150 and 300. When you change the canvas's height and width in html/css, it doesn't change js. you have to specify in the js that there was a change. Hope this helps

Removing text in HTML5 Canvas?

I'm working on a HTML5 Canvas project and have some text drawn on the screen. Right now, it appears and just stay there, but what I need is for it to disappear after a few seconds so that every time it's called it's not just new text being drawn on top of the old text.
I tried clearRect() but that completely clears the entire rectangle and removes some of my background too, which I don't want.
Is there a way to do this?
I'm drawing the text with this basic function:
function drawText() {
ctx.font = "30px Arial";
ctx.fillText("Please wait...", 575, 130);
}
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<button onclick="showTheText()">Click to show text</button>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function showTheText() {
var myText = {
text: 'Hello World',
x: 0,
y: 75,
fill: 1
};
drawText(myText, context);
// wait one second before starting animation
setTimeout(function() {
animate(myText, canvas, context);
}, 1000);
}
function drawText(myText, context) {
context.font="30px Arial";
context.fillStyle="rgb(0, 0, 0, " + myText.fill + ")";
context.fillText(myText.text, myText.x, myText.y);
}
function animate(myText, canvas, context) {
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
// !!!!!!!! redraw your background !!!!!!!!
// then redraw your text with new opacity
myText.fill -= .1;
drawText(myText, context);
// request new frame
if (myText.fill > -.1) {
setTimeout(function() {
animate(myText, canvas, context);
}, 2000 / 60);
}
}
</script>
</body>
</html>
Hope this can help you. What it does it immediately draws the text (and the rest of your background, you didn't provide it), then sets up a recursive timeout that will clear the rect, redraw your background, decrement the amount of opacity to apply to the text's fill, and redraw the text as well. You can slow it down by changing the time of the last setTimeout.
I adapted it from this example: https://www.html5canvastutorials.com/advanced/html5-canvas-animation-stage/
you can create a simple function to delete ,
you will need some values. For example, font height. width of character ... etc ,
for example in this case , you can use the following function , With few modifications :
function removeText(x,y,txt_length,font_height,char_width,ctx) {
ctx.clearRect(x, y-font_height ,char_width*txt_length,font_height);
}
and this function for write your string :
function drawText(x,y,text,ctx) {
ctx.font = "30px Arial";
ctx.fillText(text,x,y);
}
The same parameters x and y are passed to the functions and txt_length = text.length;
Once you've drawn text to canvas, it's no longer text - it's just a bunch of pixels! Since those pixels overwrite what is already there, there's no way to delete just the text.
Generally what you can do is re-draw the entire scene without the text, if you want to get rid of it.
You could also try re-drawing the text in the same position using the background color, which would remove the text, but this only works if the text is on a solid background.
To achieve expected use below option of fillStyle in clearText function
Create another function clearText with fillStyle white color with same text and x , y coordinates
Call clearText function from the drawText
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function drawText() {
clearText()
ctx.font = "30px Arial";
ctx.fillStyle = "black";
ctx.fillText("Please wait...", 575, 130);
}
function clearText() {
ctx.font = "30px Arial";
ctx.fillStyle = "white";
ctx.fillText("Please wait...", 575, 130);
}
<button onclick="drawText()">draw text</button><br>
<canvas id="myCanvas" width="800" height="800"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
code sample - https://codepen.io/nagasai/pen/oqOXxz

Lines outside of canvas

I define a canvas as <canvas id="maincanvas" class="canvas"></canvas> with the style
.canvas {
width: 1000px;
height: 750px;
border: 1px dotted;
}
Then I try to draw a line from the upper-left to the lower-right with:
function GenerateSym() {
var c = document.getElementById("maincanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(5, 5);
ctx.lineTo(995, 745);
ctx.stroke();
Unfortunately, the line seems to start just a few px too low. While it leaves the canvas entirely on the bottom-center instead of ending just before the bottom-right corner. Additionally, the line seems to be at least 3px wide with terrible anti-aliasing.
I'm running Mint 18 with Firefox 58. Thanks!
You cannot use CSS style for resizing of the canvas element, or you will run into this issue. The canvas DOM element has properties width and height which equel to attributes "width=.." and "height=.." . As said here: Canvas width and height in HTML5 .
So the correct thing to do would be:
.canvas{ style: 1px dotted;}
and
<script>
var c = document.getElementById("maincanvas");
var ctx = c.getContext("2d");
c.width= 1000;
c.height= 750;
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(5, 5);
ctx.lineTo(995, 745);
ctx.stroke();</script>

trying to colorize a simple PNG and draw inside a mask element in canvas

I tried to create an HTML canvas, place a rectangle... then INSIDE THAT rectangle, draw various shapes and an RGBa PNG... all of them clipped inside the dimensions of the rectangle. Then I tried to change the color of the PNG when you press an HTML button input. (Further comments in code.)
Heres the problems... A. You have to draw to a temporary canvas and apply "GlobalCompositeOperation source-atop" just AFTER the clipping rectangle. Everything drawn after that is successfully clipped into the rect shape. Then the whole thing is copied (drawn) to a MAIN canvas. I was told to do it this way in order for the programming to recognize MULTIPLE elements after a "composite" operation. I have to say this works BEAUTIFULLY!! but here's problem B...
To to a "getData" on an image (to change color), I think you have to place the image on a canvas, and doing all the image pixel manipulation screws up the "composite" operation, so I tried to draw the PNG to a THIRD canvas, do the pixel changes, and then draw it to the temporary canvas... adding it to the rest of the elements....THEEENNN draw it all to the main canvas. Does not work. See code. Please help, Im mad enough to chew neutronium.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="theCanvas" width="200" height="200" style="border:2px solid #000000;"></canvas>
<canvas id="tempCanvas" width="200" height="200" style="display:none;"></canvas>
<canvas id="anotherCanvas" width="200" height="200" style="display:none;"></canvas>
<form>
<input type="button" id="changeColor" value="Click to Change Color of Graphic">
</form>
<script type="text/javascript" src="hereWeGoAgain_GHELP.js"></script>
</body>
</html>
//------------------------------------- JS
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded () {
canvasApp();
}
function canvasApp() {
var canvas = document.getElementById('theCanvas');// the main canvas, where it all goes in the end
var context = canvas.getContext('2d');
var tempCanvas = document.getElementById('tempCanvas');// the canvas to do my "source-atop" stuff...
var tempContext = tempCanvas.getContext('2d');
var anotherCanvas = document.getElementById('anotherCanvas');
var anotherContext = anotherCanvas.getContext('2d');
// ...and Im thinking I should draw the RGBA PNG here, before placing it in the temp canvas, with the other elements
var cc = document.getElementById('changeColor');
cc.addEventListener('click', function(){changeColorFunction('ff0000');}, false);
// the HTML form button to change the PNG color
var colorOfThePlacedPNG = "#000000";
var imagesToLoad = 0;
var imagesLoaded = 0;
function drawScreen() {
tempContext.fillStyle="#999999";
tempContext.fillRect(0,0,200,200); //color the whole temp canvas area grey....
tempContext.fillStyle="#2baae1";
tempContext.fillRect(30,30,140,140);//now draw a light blue rect inside....
tempContext.globalCompositeOperation="source-atop"; // now make everything drawn AFTERWARDS be clipped (masked) inside the blue rect
// when I comment out the above "global Comp Op"... everything draws to the main canvas normally...just not clipped(masked) however
tempContext.fillStyle="#f47e1f";
tempContext.fillRect(150,100,150,150);//SO heres an orange box intentionally clipped off the bottom right in the blue rect
tempContext.fillStyle="#d89bc5";
tempContext.fillRect(40,50,80,200);//AND heres a light purple rect intentionally clipped at the bottom of the blue rect
getTheImageData(); //draw PNG to another canvas, convert image data, put in tempContext
//tempContext.restore();//dont know if I need this
context.drawImage(tempCanvas, 0, 0);// and then FINALLY draw all to the main canvas
}
var loaded = function(){
imagesLoaded += 1;
if(imagesLoaded === imagesToLoad){
drawScreen();
}
}
var loadImage = function(url){
var image = new Image();
image.addEventListener("load",loaded);
imagesToLoad += 1;
image.src = url;
return image;
}
function changeColorFunction(e) {
colorOfThePlacedPNG = e;
drawScreen();
}
function getTheImageData(){
anotherContext.drawImage(testPNGimage, 0, 0);// draw to the third canvas(another canvas)
var imgData = anotherContext.getImageData(0, 0, 200, 200);
// how do i color it red? ....like #ff0000 ???
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i+1] = 255 - imgData.data[i+1];
imgData.data[i+2] = 255 - imgData.data[i+2];
imgData.data[i+3] = 255;
}
tempContext.putImageData(imgData, 0, 0);
}
var testPNGimage = loadImage("test.png");// the PNG is just a 75X75px black squiggle drawn in pshop
}
You're overcomplicating things!
There is a clipping method built into canvas.
Use clipping instead of compositing and multiple canvases.
Do this and all new drawings will be clipped inside your 140x140 rect:
context.beginPath();
context.rect(30,30,140,140);
context.clip();
Here's a simplified redesign of your code:
Draw a grey rect filling the canvas.
Draw a blue 140x140 rect at [30,30].
Clip all new drawings into the blue rect with context.clip()
Draw a clipped orange rect.
Draw a clipped purple rect.
Unclip so new drawings will be visible anywhere on the canvas.
Draw the squiggle image (it's not clipped).
Use .getImageData to invert every pixel's color.
And a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/squiggle.png";
function start(){
//color the whole canvas area grey....
ctx.fillStyle="#999999";
ctx.fillRect(0,0,200,200);
//now draw a light blue rect inside....
ctx.fillStyle="#2baae1";
ctx.beginPath();
ctx.rect(30,30,140,140);
ctx.fill();
// save the unclipped context state
ctx.save();
// cause all new drawings to be clipped inside
// the blue 140x140 rect at [30,30]
ctx.clip();
//SO heres an orange box intentionally clipped off the bottom right in the blue rect
ctx.fillStyle="#f47e1f";
ctx.fillRect(150,100,150,150);
//AND heres a light purple rect intentionally clipped at the bottom of the blue rect
ctx.fillStyle="#d89bc5";
ctx.fillRect(40,50,80,200);
// restore the context state (releases clipping for new drawings)
ctx.restore();
// draw the squiggley line image -- it's not clipped in the blue rect
ctx.drawImage(img,0,0);
// invert the colors using getImageData
var imgData = ctx.getImageData(0, 0, 200, 200);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i+1] = 255 - imgData.data[i+1];
imgData.data[i+2] = 255 - imgData.data[i+2];
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 0, 0);
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=200 height=200></canvas>

how to center mouse pointer on the fillRect() using canvas html5

i'm working with this application using canvas jsfiddle as you can see as you move the mouse on the canvas a black rectangle follows the pointer, and the pointer is on the top left of that rectangle. What i want to achieve is just to center the pointer on that rectangle, this is my code
HTML
<section id="main">
<canvas id="canvas" width="600" height="400" style="border: 1px solid #aaa;"></canvas>
</section>
JavaScript
function firstMethod() {
var cv = document.getElementById('canvas');
canvas = cv.getContext('2d');
window.addEventListener("mousemove", animate, false);
}
function animate(ev) {
canvas.clearRect(0,0,600,400);
var xPos = ev.clientX;
var yPos = ev.clientY;
canvas.fillRect(xPos, yPos, 100, 100);
}
window.addEventListener("load", firstMethod, false);
thanks in advance.
try this, i just put -50 to xPos and yPos to make it center. since the dimension you've set on the fillRect() is 100 x 100
function animate(ev) {
canvas.clearRect(0,0,600,400);
var xPos = ev.clientX;
var yPos = ev.clientY;
canvas.fillRect(xPos-50, yPos-50, 100, 100);
}
demo

Categories