EDITED:
It turned out it's a retina bug. Not replicable on other screens.
Referring Camanjs clear canvas when init Caman()? and posted there http://jsfiddle.net/m1erickson/R4kJM/ CamanJS should accept the canvas with data s argument. Ale documentation seemed to confirmed this fact. But somehow the fiddle is not working. The blue thing disappears once CamanJS initialize.
The code again:
http://jsfiddle.net/m1erickson/R4kJM/
HTML:
<canvas id="original" width=100 height=100></canvas>
JS:
var canvas = document.getElementById("original");
var ctx = canvas.getContext("2d");
// make a drawing on the original canvas
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 60, 40);
// modify the original drawing
Caman("#original", function () {
this.brightness(75).render();
});
It's the bug in CamanJS. The issue still and work around described here.
https://github.com/meltingice/CamanJS/issues/188
Related
I'm looking at sample code on how to draw shapes using only JavaScript.
I'm trying to test this sample code in JSFiddle.net, and while hitting 'Run' doesn't produce any errors, the result is completely blank.
Does anyone know how to make something actually appear on the screen in JsFiddle.net?
draw = function() {
//sky
background(172, 238, 247);
//ground
fill(95, 156, 83);
rect(0, 350, 400, 50);
};
draw();
Link to non-working Fiddle:
https://jsfiddle.net/skdopL1b/
So the way javascript works with HTML to draw things is through the Canvas API. First you have to contextualization and establish interactions between JS code and <canvas> element. This is done with built in function and then a little bit of code to make it short-hand.
<html>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
const c = document.getElementById("canvas"); //Grab canvas element to use as object
const ctx = c.getContext('2d'); //Function that enable the 2d functions of Canvas API
ctx.fillRect(0,0,10,10) //Example of ctx function
<script>
</html>
From the JS Fiddle you gave us, It looks like you probably copied functions from a video that pre-established these function as they are not normal canvas function but custom functions. I can show you example of how to write one of these custom functions
function background(red,green,blue) {
ctx.fillStyle = 'rgb('+red+','+green+','+blue+')';;
ctx.fillRect(0,0,c.width,c.height); //Makes a rectangle the size of the canvas
}
background(172,238,247); //Creates a canvas sized rectangle with rgb(172,238,247)
You will have to either find his function declarations or write your own (or just use the raw canvas functions) to work with the javascript this way. You also need to define a canvas element with an ID. Lucky for you Im working on making a JSFiddle that works for you since you seem fairly new to this whole HTML5/JS thing.
-------EDIT-------
Heres your fiddle link friend, I included comments to help you understand everything https://jsfiddle.net/xwqg1cez/2/
I feel like there is a very simple way to do this, yet I can't find it. I have an image whose relative path to my clientscript.js file is ./images/orig classic pokemon frame.png. I want to draw it on the canvas, around the text that is drawn on the very last line of this code snippet:
function render(context) {
context.fillStyle = 'black';
context.strokeStyle = 'black';
context.save();
var imgFrame = new Image();
imgFrame.src = './images/origclassicpokemonframe.png';
imgFrame.onload = function(){
context.drawImage(imgFrame, 0, 0, 30,30);
};
context.font = "24px Early GameBoy";
context.fillText("What? _____", 10, canvasHeight-44); //20 padding plus 24 line height
The text shows up on the canvas, but the frame never does. Changing the dimensions or the x and y coordinates does not make a difference. Any help is appreciated.
EDIT: Changed the filepath to images/origclassicpokemonframe.PNG and now the image shows on canvas in firefox, but not chrome.
help????
Another edit: I can see in the console on both chrome and firefox that the HTTP request is loading it just fine but somehow it just doesn't want to draw on the canvas.
context isn't a global variable. As such, using it in the 'onload' function is out of it's scope.
There was nothing wrong with your src if it would work in an <img> element.
I'm new to using canvas and am having a weird issue. My canvas lines are successfully being drawn using:
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
where canvas is the id of a canvas. I then draw using the methods:
context.strokeStyle = "red";
context.beingPath();
context.moveTo(x, y);
context.lineTo(x, y);
context.stroke();
with lineTo being called in a loop updating its position. I use these methods in a function and can draw multiple lines. The issue is (is it an issue?) when I use google's inspect elements I can't find these lines under the canvas that was created. I am used to seeing a path element of some sort.
I can see the script that created these lines, however.
EDIT: just checked another website using canvas and this seems to be normal behavior. Would like confirmation though.
Thanks
Yes It's normal behaviour.
In 2012 the chrome have some experimental plugin with help inspect canvas. But I not sure if it still avaiable (I found information here http://www.html5rocks.com/en/tutorials/canvas/inspection/)
I'm trying to use a clip region on a canvas and it stops working as soon as the coordinate system is rotated by any non zero value:
window.onload = function() {
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");
ctx.rotate(Math.PI / 8); // !!! Clipping doesn't work with any non zero value
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.stroke();
ctx.clip(); // !!! Image below is invisible in Chrome when clip() is enabled
var objectImage = document.getElementById("test");
ctx.drawImage(objectImage, 0, 0);
}
<canvas id="mainCanvas" width="320" height="240" style = "border:1px solid #d3d3d3;"></canvas>
<img id="test" width="0" height="0" src="https://dl.dropboxusercontent.com/u/4111969/test.png">
The code works fine in Firefox:
But in Chrome the image inside the rectangle is empty:
Translate and scale transformations seem to work fine, but not the rotate. Am I doing something wrong? If it's a bug in Chrome, is there a good workaround?
Edit:
My system is:
Chrome "Version 49.0.2623.87 m", Windows 7 Home Premium SP1, ASUS R7 250X graphics card. I can reproduce the problem every time.
I found that the problem goes away if I turn off hardware acceleration in the browser settings. As I understand this means there's probably a problem with my graphics card driver.
Is there a way for my webpage to force the software rendering in Chrome?
In Chrome, drawImage() is done before Image loaded, you have to check like this:
<!DOCTYPE HTML>
<html>
<script>
window.onload = function() {
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");
ctx.rotate(Math.PI / 8); // !!! Clipping doesn't work with any non zero value
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.stroke();
ctx.clip();
//Make sure the Image is loaded
var objectImage= new Image();
objectImage.src="https://dl.dropboxusercontent.com/u/4111969/test.png"
objectImage.onload =function()
{
ctx.drawImage(objectImage, 0, 0);
}
}
</script>
<body>
<img id="test" width="0" height="0" src="https://dl.dropboxusercontent.com/u/4111969/test.png">
<canvas id="mainCanvas" width="320" height="240" style = "border:1px solid #d3d3d3; margin:0; padding:0"></canvas>
</body>
</html>
The problem seems to be related to the browser hardware acceleration. Everything works fine as soon as I turn it off.
However, I don't know if it's possible for my web page to disable hardware acceleration.
I just experimented a bit with Javascript and HTML5 canvas and when I saw it in my browser (chrome) I realised that it's not very pretty rendered. After that I saw it in the Internet Explorer and there it looks even more crawful. I made a little Example: http://ios.xomz.de/
I just declared the canvas object in the html code
<canvas id="mycanvas" width="1000px" height="600px"/>
and rendered into it with
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(200, 200, 600, 200);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.font = "40pt arial";
context.fillStyle = "black";
context.fillText("Hello World!", 220, 380);
for example.
Can you explain why the rendering isn't good ?
Do not use "px", also I'd recommend not using a self-closing tag:
<canvas id="mycanvas" width="1000" height="600"></canvas>
http://jsfiddle.net/c2KeD/
This problem is related to the way objects are drawn on a float based grid (especially vertical and horizontal lines and thus rects).
See there for an explanation and a schema : http://canop.org/blog/?p=220
Depending on the size of your objects, you need to use integer or mid-integer coordinates and sizes for your shapes, the goal being to fill complete pixels in both dimensions.
For example :
use a mid-integer for a thin line (one pixel width)
use an integer coordinate for a 2 pixels wide line
(and extend the logic for rects)
In your case, with a line width of 5, you have sharper rects by using this :
context.rect(200.5, 200.5, 600, 200);
Demonstration here : http://jsfiddle.net/dystroy/TyNBB/