Develop Reference

svg color inside fabricjs canvas not changing

i'm trying to change svg path's fill which is inside fabricjs canvas.
using this function
function changeColor(material) {
console.log(svgGroup[0].fill)
console.log(material);
if (material == 'base') {
svgGroup[0].fill = '#000000';
console.log(svgGroup[0].fill)
}
texture.needsUpdate = true;
object.children[0].material = textureMaterial;
canvas.renderAll();
}
but it doesn't updated automatically
anyone have any idea why? any thought would be helpful

i found the solution, the problem iwas i didn't set the color correctly. instead of doing this
svgGroup[0].fill = '#000000';
it should've use this
svgGroup._objects.forEach(obj => {
if (obj.id == material) {
obj.set('fill', color);
}
});
that way it is rendered when renderAll() is called

Image fallback in canvas with Raphael

I have to draw some images (using a for cycle) and I want to load a fallback image if it can't find the right image.
My javascript:
var image = paper_layer.image(image_selected, x, y, width, height);
$('image').one('error', function () {
console.log('image not found')
image_selected='/my_path/not_found.png'
var image = paper_layer.image(image_selected, x, y, width, height);
});
The problem is that when miss an image this function add an fallback image for each image, even the ones found.
I tried this too but it doesn't works (no fallback appears, the message 'image not found' don't appear on console):
var image = paper_layer.image(image_selected, x, y, width, height);
image.onerror=function () {
console.log('image not found')
image_selected='/my_path/not_found.png'
var image = paper_layer.image(image_selected, x, y, width, height);
};
PS: I'm using Raphael

paper_layer.image does not return an HTMLImageElement object, but some sort of Raphael object.
That however seems to contain the reference to the actual image element under the key 0 - so try image[0].onerror=..., that should correctly bind the error handler to the actual HTML image element.

Can I change javascript draw function to an image?

I found a gamecode on github [https://github.com/maryrosecook/retro-games] today. I want to edit it and use png images instead of the draw function, is there anyway I can do it?
Thank you.
BodyBlock.prototype = {
draw: function(screen) {
drawRect(screen, this, "black");
}

drawRect() was custom, from scratch function.
var drawRect = function(screen, body, color) {
screen.fillStyle = color;
screen.fillRect();
};
What you are looking for is standard javascript canvas Method.
http://www.w3schools.com/tags/canvas_fillrect.asp
Tutorial : http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

How can i play a gif like 9 gag?

http://www.9gag.com
I want pause and play a gif,like the 9gag,
how can i do that?
I know I have to use one. Jpg and. Gif but I tried a few things but did not work
I found this function
function is_gif_image(i) {
return /^(?!data:).*\.gif/i.test(i.src);
}
function freeze_gif(i) {
var c = document.createElement('canvas');
var w = c.width = i.width;
var h = c.height = i.height;
c.getContext('2d').drawImage(i, 0, 0, w, h);
try {
i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
} catch(e) { // cross-domain -- mimic original with all its tag attributes
for (var j = 0, a; a = i.attributes[j]; j++)
c.setAttribute(a.name, a.value);
i.parentNode.replaceChild(c, i);
}
}
function unfreeze_gif(id, src) {
i = document.getElementById(id);
i.src = src;
}
but i dont know how to use on the HTML
Can someone give me an example? with HTML , CSS E JS (or Jquery) ?
Thanks

It's just 2 versions of the image: One static JPG, one moving GIF.
Here's a fiddle that mimic the behaviour: http://jsfiddle.net/bortao/QADeM/
JS
$(".gif-post").on("click", function () {
var $this = $(this);
var img = $this.find("img"); // Find the image element
if (!this.playing) {
this.playing = true; // Set or create a variable
img.attr("src", img.attr("src").replace(".jpg", "a.gif"));
$this.find(".play").hide(); // Hide the overlay
} else {
this.playing = false;
img.attr("src", img.attr("src").replace("a.gif", ".jpg"));
$this.find(".play").show();
}
});

I was actually working on a 9gag clone myself, so i was searching as well for a gif player.
You can use this one: http://freezeframe.chrisantonellis.com/
All you have to do for this one is include the javascript and in the .gif link and add the following class: "freezeframe"
There is also this one: http://quickleft.com/blog/embeddable-animated-gifs-with-controls-just-in-time-for-christmas
I haven't used it, but it seems very interesting.

Javascript Extensibility

I've a script, which manipulates with canvas. I call it like this:
namespace.module.do(canvas, paramString);
I'd like to move the call to the canvas itself, so it'll somewhat similar to:
<canvas namespace.module.dobehavior=paramString />
Can I do it with JS and if not how close can I get to it?

The canvas is a DOM object, so you could attach functions to it. In your example:
document.getElementsByTagName("canvas")[0].namespace.module.dobehavior = function(paramString) { ... code ... };
(obviously, document.getElementsByTagName("canvas")[0].namespace and document.getElementsByTagName("canvas")[0].namespace.module would need to be an object, so you might need to do
document.getElementsByTagName("canvas")[0].namespace = { module : { dobehavior : function(paramString) { ... } } };
And then if you had the canvas element somewhere (possibly also through var canvas = document.getElementsByTagName("canvas")[0];) you could do
canvas.namespace.module.dobehavior("someString");
Is that what you mean?

In JQuery
$(function() {
$("canvas[ns.mod.colorBehavior]") {
var color = $(this).attr("ns.mod.colorBehavior");
if (color == "red") {
var context = this.getContext('2d');
context.fillStyle = "#ff0000";
context.fillRect(0,0,width,height);
}
}
}
Where width and heigh are the width and height of your canvas element (or a higher value like 10000).