When I add
ctx.addEventListener('mousedown', onDown, false);
The canvas drawing (background and shapes) disappear and the page is blank, and then when I remove this event listener from the code they reappear again. Just wondering why this is happening? Thanks in advance
<script>
var ctx, W, H;
var x = 10;
window.onload = function() {
var canvas = document.getElementById("canvas");
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
ctx = canvas.getContext("2d");
ctx.addEventListener('mousedown', onDown, false); //When this is here, canvas drawing disappears, when it's not here canvas drawing reappears again
setInterval(draw, 1);
function draw() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "#E6E6FF";
ctx.fillRect(0, 0, W, H);
ctx.fillStyle = "black";
ctx.fillRect(x,20,10,10);
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,80);
ctx.fill();
}
}
function onDown(event) {
//where x is found
cx = event.pageX
cy = event.pageY
alert("X,Y ="+cx+','+cy);
}
You can't add an event listener to the canvas's context. You'll need to add it to the canvas itself.
Instead of:
ctx.addEventListener('mousedown', onDown, false);
… do this:
canvas.addEventListener('mousedown', onDown, false);
jsBin demo
use:
ctx.canvas.addEventListener
or:
canvas.addEventListener
cause context is just an Object in which the HTMLElementCanvas lives in.
To spot such errors your-self, the easiest way is to debug your code using Developer Tools, opening the console tab and reading the errors you're shown:
Related
Basically what my project does is to fetch a picture from Database, place it into canvas, move it, zoom in and out, this this are working perfectly.
Next step is to rotate the picture and i have no idea what I am doing wrong. In the picture i described how my document looks like when the canvas is accessed. After I rotate the picture, it goes outside the canvas. My code looks like below and i have no idea what I am doing wrong. Thank you
function drawRotated(degrees) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(image.width*0.15,image.height*0.15);
ctx.rotate(degrees * Math.PI / 180);
ctx.translate(-image.width*0.15,-image.height*0.15);
ctx.drawImage(image, 0, 0, image.width*0.15, image.height*0.15);
}
Maybe this is not the answer you are expecting for. I didn't use your code. I hope it helps.
The main idea is to draw the image with the center in the origin of the canvas.
window.onload = function() {
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
var gkhead = gk;
gkhead.src = gk.src;
let w = gkhead.width;
let h = gkhead.height;
let x = -w/2;
let y = -h/2;
ctx.drawImage(gkhead,x,y,w,h);
function translateToThePoint(p){
ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(p.x,p.y);
ctx.scale(.25,.25);
ctx.drawImage(gkhead,x,y,w,h);
ctx.restore();
}
function rotate(angleInRad, p){
ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(p.x,p.y);
ctx.rotate(angleInRad);
ctx.scale(.25,.25);
ctx.drawImage(gkhead,x,y,w,h);
ctx.restore();
}
let p = {x:canvas.width/2,y:canvas.height/2}
//translateToThePoint(p);
rotate(-Math.PI/10,p);
}
canvas {
border:1px solid
}
<canvas id="canvas">
<img id="gk" src='https://www.warrenphotographic.co.uk/photography/cats/38088.jpg' />
</canvas>
I want to add the dynamic shapes like circle, rectangle, line, oval, etc in the image using jquery plugin or javascript. For ex:
In this image dynamic text can be create by write in textbox somewhat this type of same I want do for add the shape
I have research it in different software website but there is noting appropriate result has come. Please give me some hint to solve this problem.
for demo you can refer the following link
http://www.printo.in => http://www.printo.in/translucent-cards-single-sided-translucent-card-ss-blank-4552
http://www.vistaprint.in => http://www.vistaprint.in/studio.aspx?template=471103%7es1_AHT_023&ag=True
Advance in thanks.
Use the HTML5 <canvas></canvas> element.
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
//On mouse events on the canvas
$canvas.mousedown(function(e) {
lastEvent = e;
mousedown = true;
}).mousemove(function(e) {
//Draw lines
if(mousedown) {
ctx.beginPath();
ctx.moveTo(lastEvent.offsetX, lastEvent.offsetY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.strokeStyle = color;
ctx.stroke();
lastEvent = e;
}
}).mouseup(function() {
mousedown = false;
}).mouseleave(function() {
$canvas.mouseup();
});
</script>
I have written up an example, being new to canvas I need help transforming a basic circle into a letter.
Fiddle
Here is the code you will see in the fiddle. Note the circle drawing is what is in the center of the canvas, I am trying to use a letter like B with a cool font in place of the circle, I am just not sure how to implement this.
So just imagine where the circle is a letter being in that spot, still transparent with a rectangle overlaying the image with the color rgba(255,255,255,0.7).
var canvas = document.getElementById('c');
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
/**
* Your drawings need to be inside this function otherwise they will be reset when
* you resize the browser window and the canvas goes will be cleared.
*/
drawStuff();
}
resizeCanvas();
function drawStuff() {
if (canvas.getContext) {
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
// Full rectangle
context.fillStyle = 'rgba(255,255,255,0.7)';
context.fillRect(0, 0, window.innerWidth, window.innerHeight);
// Inner circle
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// Add a letter instead of a circle?
// Hmm
context.fillStyle = 'rgba(0,0,0,1)';
context.globalCompositeOperation = 'destination-out';
context.fill();
}
}
why not
context.fillStyle = 'rgba(0,0,0,1)';
context.strokeStyle = "#F00";
context.font = "bold 60pt Arial";
context.globalCompositeOperation = 'destination-out';
context.fillText("B", 20, 50);
http://jsfiddle.net/pqD87/
Here again with centering
context.fillStyle = 'rgba(0,0,0,1)';
context.globalCompositeOperation = 'destination-out';
context.textAlign = 'center';
context.font="150px Times";
context.fillText("A",centerX,centerY+40);
http://jsfiddle.net/x4BuF/1/
If I try to draw text to my canvas at the onload event, the text shows up blurry. I draw to the same canvas later via a button click from another function and it's fine. But if I call this function from the button, it's still blurry. Can anybody see something wrong in this code?
window.onload = initCanvasRender;
function initCanvasRender() {
var c = document.getElementById("canvas");
var ctx = c.getContext('2d');
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = 'black';
ctx.font = '20px Times New Roman';
ctx.fillText('hello...', c.width/2, c.height/2);
}
There may be some problem with the
ctx.fillText('hello...', c.width/2, c.height/2);
Because if you for example set width of the canvas with css then c.width and c.height will be the default size for the canvas which is, 300x150 and not the size defined in css. Try to set two variables for the width and height that are global for your application. E.g
var canvasWidth = 400;
var canvasHeight = 200;
c.width = canvasWidth;
c.height = canvasHeight;
/* ... */
and then later in your code you can use canvasWidth and canvasWeight:
ctx.fillText('hello...', canvasWidth/2, canvasHeight/2);
Take a look at this test: http://jsfiddle.net/EsQfb/7/ it's important to use use the canvas.width and not canvas.style.width in your case.
Take a look at this for more information about this: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width
I am trying to do a simple animation with html5. Please take a look at the link below, through a touch screen device.
https://dl.dropbox.com/u/41627/wipe.html
The problem is as follows : Every time the user touches the screen , a box gets drawn around his finger which animates from small to big. I want just the outer most boundary to be visible and not the rest. I do not want to clear the canvas as I want the state of the rest of the canvas to be preserved.
Images to illustrate the issue:
My code is as follows :
function init() {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');
img.onload = function () {
ctx.beginPath();
ctx.drawImage(img, 0, 0);
ctx.closePath();
ctx.globalCompositeOperation = 'destination-out';
}
img.src = "https://dl.dropbox.com/u/41627/6.jpg";
function drawPoint(pointX,pointY){
var grd = ctx.createRadialGradient(pointX, pointY, 0, pointX, pointY, 30);
grd.addColorStop(0, "rgba(255,255,255,.6)");
grd.addColorStop(1, "transparent");
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(pointX,pointY,50,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();
}
var a = 0;
var b = 0;
function boxAround(pointX,pointY, a, b) {
ctx.globalCompositeOperation = 'source-over';
ctx.strokeStyle = "black";
ctx.strokeRect(pointX-a, pointY-b, (2*a), (2*b));
ctx.globalCompositeOperation = 'destination-out';
if(a < 100) {
setTimeout(function() {
boxAround(pointX,pointY, a+5, b+5);
}, 20);
}
}
canvas.addEventListener('touchstart',function(e){
drawPoint(e.touches[0].screenX,e.touches[0].screenY);
boxAround(e.touches[0].screenX,e.touches[0].screenY,0 , 0);
},false);
canvas.addEventListener('touchmove',function(e){
e.preventDefault();
drawPoint(e.touches[0].screenX,e.touches[0].screenY);
},false);
You can achieve this effect by either using a second canvas, or even just having the box be a plain <div> element that is positioned over the canvas. Otherwise, there is no way around redrawing your canvas.