I was making a web game just for a little practice, but my drawing will not show in the canvas element of the browser. I do not know why it will not show. By the way, I used variables as the value of the horizontal position so that I could easily change them later.
JavaScript
var canvas = getElementById('myCanvas');
var blt = canvas.getContext('2d');
var bS = 20;
var x = 220;
var y = 340;
var x1 = 227;
var x2 = 229;
var x3 = 240;
var x4 = 251;
var x5 = 253;
var x6 = 260;
function drawShip() {
blt.beginPath();
blt.moveTo(x,360);
blt.lineTo(x,340);
blt.lineTo(x1,337);
blt.lineTo(x2,337);
blt.lineTo(x2,340);
blt.lineTo(x3,330);
blt.lineTo(x4,340);
blt.lineTo(x4,337);
blt.lineTo(x5,337);
blt.lineTo(x6,340);
blt.lineTo(x6,360);
blt.lineTo(x,360);
blt.closePath();
};
drawShip();
You need to use the stroke() method to draw the path as a line.
Here you can find every canvas methods and some documentation and examples:
http://www.w3schools.com/tags/ref_canvas.asp
You forgot to stroke the path. Add this after blt.closePath()
blt.stroke();
In your code change the line
var canvas = getElementById('myCanvas');
by
var canvas = document.getElementById('myCanvas');
and add blt.stroke(); after blt.closePath();
Related
I have a canvas of size 300px to 300px and I drag and drop a very large image on to it. so it takes the size of the canvas. Then I have a resizable and moveable square which I use to crop certain areas. So using jquery I take the width and height of the crop square and the x and y distance to the clipping point. But when I finally crop and display the region in a second canvas I can see that the cropped region is not exactly what I selected as the region to be cropped.
I dont want to use getimagedata and putimagedata commands. I want to use drawimage command only
Please help
var x = $("#crop_square").width();
var y = $("#crop_square").height();
var ty = $("#crop_square").offset().top - $("#area_c").offset().top;
var tx = $("#crop_square").offset().left - $("#area_c").offset().left;
var c = document.getElementById("area_c");
var c2 = document.getElementById("area_c2");
var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");
ctx2.drawImage(image_src,tx,ty,x, y,0,0,c2.width,c2.height);
<canvas id ="area_c" style="width:300px;height:300px;border:3px solid black;z-index:1" ondrop="dropb(event)" ondragover="myfkb(event)" >
</canvas>
<canvas id ="area_c2" style="width:300px;height:300px;border:3px solid black;z-index:1" >
</canvas>
Don't minus area_c top and left from tx,ty
Try this
var x = $("#crop_square").width();
var y = $("#crop_square").height();
var ty = $("#crop_square").offset().top;
var tx = $("#crop_square").offset().left;
var c = document.getElementById("area_c");
var c2 = document.getElementById("area_c2");
var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");
ctx2.drawImage(image_src,tx,ty,x, y,0,0,c2.width,c2.height);
I attempted to animate a sprite sheet using html and javascript to no avail. Here is my sprite sheet
Below is lines 36-59 of my code. I'm not getting any errors so I don't really know what's wrong. How do I fix/improve my code?
This is for a project I'm doing. I've tried using different methods I've found online but none really worked either. I've tried shifting the image as well.
<html>
<head>
<title>Tree Animation</title>
</head>
<body>
<canvas id='canvas'></canvas>
<script>
var canWidth = 400;
var canHeight = 100;
//position where the frame will be drawn
var x = 0;
var y = 0;
var srcX;
var srcY;
var sheetWidth = 230;
var sheetHeight = 79;
var frameCount = 5;
var width = sheetWidth/frameCount;
var height;
var currentFrame = 0;
var tree = new Image();
tree.src = "tree sprite.jpg"
var canvas = document.getElementById('canvas');
canvas.width = canWidth;
canvas.height = canHeight;
var ctx = canvas.getContext('2d');
function updateFrame(){
currentFrame = ++currentFrame%frameCount
srcX = currentFrame*width;
srcY = 0;
ctx.clearRect(x, y, width, height);
}
function draw(){
updateFrame();
}
setInterval(function(){
draw();
}, 100);
</script>
</body>
</html>
I expect the output to be an animation of a tree growing, but instead I'm getting a blank page.
you should provide more code or a snippet, there are several variables didn't show up in your code
and it's hard to debug your code if u use setInterval, you should make sure your code can work first.
maybe you can try step by step:
draw the whole img on the canvas first. if it works, go next
invoke your draw() function manually, check if the img drawed
invoke more, such assetTimout(draw, 1000), check the result
ok, and i think you can console.log these variables in draw
Website: http://minimedit.com/
Currently implementing an eye dropper. It works fine in my normal resolution of 1080p, but when testing on a higher or lower resolution it doesn't work.
This is the basics of the code:
var ctx = canvas.getContext("2d");
canvas.on('mouse:down', function(e) {
var newColor = dropColor(e, ctx);
}
function dropColor(e, ctx) {
var mouse = canvas.getPointer(e.e),
x = parseInt(mouse.x),
y = parseInt(mouse.y),
px = ctx.getImageData(x, y, 1, 1).data;
return rgb2hex('rgba('+px+')');
}
When I first initiate the canvas I have it resize to fit resolution:
setResolution(16/9);
function setResolution(ratio) {
var conWidth = ($(".c-container").css('width')).replace(/\D/g,'');
var conHeight = ($(".c-container").css('height')).replace(/\D/g,'');
var tempWidth = 0;
var tempHeight = 0;
tempHeight = conWidth / ratio;
tempWidth = conHeight * ratio;
if (tempHeight > conHeight) {
canvas.setWidth(tempWidth);
canvas.setHeight(conHeight);
} else {
canvas.setWidth(conWidth);
canvas.setHeight(tempHeight);
}
}
The x and y mouse coordinates work fine when zoomed in, but they don't line up with the returned image data. It seems as though the ctx isn't changing it's width and height and scaling along with the actual canvas size.
The canvas element is showing the correct width and height before using getContext as well.
Any ideas on a solution?
Feel free to check out the full scripts on the live website at: http://minimedit.com/
Try "fabric.devicePixelRatio" for calculating actual position, for example:
x = parseInt(mouse.x) * fabric.devicePixelRatio
I am using raphael js in my application. Here I need to draw a small rectangle on a point of clicking in raphael paper. I need to connect these rectangle using a line. Can anyone make DEMO of this. I am adding sample DEMO. Please update this.
My DEMO.:
HERE
var paper = Raphael("editor", 635,500),
canvas= document.getElementById('editor').style.backgroundColor='gray';
Now I need to draw samll rectangles on clicking raphael paper and joing them with a line.
This should do the trick; http://jsfiddle.net/9dsgcv1c/1/
var paper = Raphael("editor", 635,500),
canvas= document.getElementById('editor').style.backgroundColor='gray';
var offsetx = paper.canvas.offsetLeft;
var offsety = paper.canvas.offsetTop;
var prevRect = null;
var rWidth = 50;
paper.canvas.onmousedown = function(e) {
var posX = e.pageX-offsetx;
var posY = e.pageY-offsety;
var rectX = posX - (rWidth/2)
var rectY = posY - (rWidth/2)
var c = paper.rect(rectX, rectY, rWidth, rWidth).attr({fill:"#fff"});
if(prevRect) {
var p = "M"+prevRect.x +" " +prevRect.y +"L"+posX+" "+posY
var line = paper.path(p);
}
prevRect = {x: posX, y:posY};
}
-
<b>Click on CAMVAS to draw rectangle</b>
<div id="editor"></div>
I have a Pie chart with lots of elements.
I've left the color picking to google charts, but after the chart is drawn, I need to retrieve the color of each row.
I know that I could generate the colors array, and set it in the charts options, and that would solve my problem, I would be able to retrieve the colors from there. But I really don't want to create that big array by hand.
So is there a way to get the color for a given row?
Thanks!
I'm not familiar with Google pie charts, but I have a basic JavaScript suggestion for you. Maybe this helps. If you have a canvas image you could use a JavaScript pixel picking method something like the following I use for mine:
//get the image
var sampleImage = document.getElementById("checkimg");
//convert the image to canvas
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
var canvas = convertImageToCanvas(sampleImage);
sampleImage.style.display = 'none';
//real position functions
function absleft(el) {
return (el.offsetParent) ? el.offsetLeft+absleft(el.offsetParent) : el.offsetLeft;
}
function abstop(el) {
return (el.offsetParent) ? el.offsetTop+abstop(el.offsetParent) : el.offsetTop;
}
canvas.onclick = function(event) {
//get real position
if (event.hasOwnProperty('offsetX')) {
var x = event.offsetX;
var y = event.offsetY;
}
else {
var x = event.layerX - absleft(canvas);
var y = event.layerY - abstop(canvas);
}
//get the pixel data
var pixelData = this.getContext('2d').getImageData(x, y, 1, 1).data;
}
document.getElementById("temp").appendChild(canvas);