caleb531 / jcanvas Goto Github PK

View Code? Open in Web Editor NEW

625.0 625.0 193.0 13.17 MB

A jQuery plugin that makes the HTML5 canvas easy to work with.

Home Page: https://projects.calebevans.me/jcanvas/

License: MIT License

JavaScript 99.47% HTML 0.53%

canvas javascript javascript-library jcanvas jquery jquery-plugin

jcanvas's People

Contributors

Stargazers

Watchers

Forkers

austinbv hawknewton drkhoinguyen xyzroundo texshot e2ghost swinarta alain18 pplaquette pomaxa zacg dinesh-ramakrishnan robathedtek makmac213 kamalkanth82 playerx nodjaja cesarnicola dksmiffs steveayre rioleo dsphinx surenm ac2855 axlwolf dariop pterevinto waseemcake saasmath jbsurv konistehrad yangdaidi robertjustjones die4game fitzsima2003 cwspear jcvelasquez fbl1991 sirithink jdearaujo shakakira waynejhung wavesun feezy9 fanfoue73 shikchen web5design arturomc chungtv nineclue horrigan chimanyans haykman gaositu dave-edwards iibarreto xuezhouzhou aleks-w kmhtoo lonjoy dqd longhongjun tofuwong bktracker nhysi rwson radio412 mashbro bart3k lulu523 manuelcorreia djnolder eikekre derek24516 aiwenlg007 werk85 oscbee antiveeranna makelivedotnet josiahgoff zijingstudio tonymedrano webx32 fatima-umar1 monkp kustomzone little-horn bartektomas yashilanka lefou23 joannesalfa rlugojr zuoguodang navyvet1125 benpope82 ukris adityap monsuratolaosebikan ch-wisdom harry827

jcanvas's Issues

Multiline text

I noticed if I try to render text with a line break in it, the line break just appears as a space, and everything remains on a single line. I suppose it wouldn't be too difficult for me to write some code that splits my text on \n and renders it in pieces, but it would be convenient to have that ability built into jCanvas.

Mouseover/out

When do you think will the mouseover and mouseout events are supported?

Website does not work?

Hi Caleb,

There seems to be a problem with the website, as

http://calebevans.me/projects/jcanvas/docs/introduction/ = http://calebevans.me/projects/jcanvas/docs/extending/ = http://calebevans.me/projects/jcanvas/docs/rotateCanvas/ = ...

Koos

document on ready

if i use

$(document).ready(function(){

}); // works fine

but if i use

$(document).on('ready', function(){

});

ERROR:
Uncaught TypeError: Cannot read property 'left' of null (jcanvas.js:1101)
event.offsetX = event.pageX - offset.left;

"offset is null" error when $(event.target).offset() returns null

Using Firefox 10 on 64bit Linux I got this error. The event that creates the issue for me is a resize; which has no offset.

So, line 1102 should check that offset is a real value before reading it

// Currently:

var offset = $(event.target).offset();
event.offsetX = event.pageX - offset.left;
event.offsetY = event.pageY - offset.top;

// Fixed it with:

var offset = $(event.target).offset();
if (offset) {
    event.offsetX = event.pageX - offset. 
    event.offsetY = event.pageY - offset.top;
}

Event problem with Iteration

My Version of jCanvas : v5.2

The Issue

While running a loop, I create a layer and assign an event to the layer. Only my first object in the loop is actually firing the event, while the others do nothing. I was expecting that all objects would fire the event not just the first object in the loop.

Code to Reproduce Issue:

for(var i=0; i<10; i++){
$("canvas").addLayer({
method: "drawPolygon",
name: "start_"+i,
fillStyle: "#c33",
x: 100+(i_15), y: 100+(i_15),
radius: 10,
sides: 5,
projection: -0.5,
click: function(params) {
// Spin star
$(this).animateLayer({
angle: '+=144'
});
}
});
}

Events not binding to drawLine()

Example below does not bind mouseover event. Should this be working?

http://calebevans.me/projects/jcanvas/sandbox.php#//%20Click%20the%20star%20to%20make%20it%20spin%0A%24%28%22canvas%22%29.drawLine%28%7B%0A%20%20layer%3A%20true%2C%0A%20%20strokeStyle%3A%20%22%23c33%22%2C%0A%20%20strokeWidth%3A%205%2C%0A%20%20x1%3A%20100%2C%20y1%3A%20100%2C%0A%20%20x2%3A%20140%2C%20y2%3A%20200%2C%0A%20%20mouseover%3A%20function%28layer%29%20%7B%0A%20%20%20%20//%20Spin%20star%0A%20%20%20%20%24%28this%29.animateLayer%28layer%2C%20%7B%0A%20%20%20%20%20%20rotate%3A%20%27+%3D144%27%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%0A%7D%29%3B

I would also like to know how to get it working with the addLayer method

variable scope inside callback using the "Functions as Layers" feature

Caleb,

I'm using the "Functions as Layers" feature - I can live with the limitations you emailed me yesterday. However, I'm trying to figure out a way to get external variables into the callback, and the approach shown in the code below (the only one I've thought of so far) doesn't work. Please advise.

~ Dave

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>jCanvas outer param access test</title>
  </head>
  <body>
    <div id="graphics">
      <canvas width="500" height="500"></canvas>
    </div>
    <script src="public/resources/jquery/jquery-1.7.2.min.js"></script>
    <script src="public/resources/jcanvas/jcanvas.min.js"></script>
    <script>
      $(document).ready(function() {
        function test(outer) {
          alert(outer);
          $("canvas").addLayer(function(ctx) {
            alert("This alert happens in FF 12.0 and SRWare Iron 18.0.1500.0.");
            // The following alert doesn't happen at all.  Why?
            alert("Why no visibility here on " + outer + "?  Is it because " +
                  "outer has gone out of scope by the time drawLayers() is " +
                  "called?");
          });
          $("canvas").drawLayers();
        }
        test("outerValue");
      });
    </script>
  </body>
</html>

Images not resizing when referencing a DOM element

Not sure if this is intentional or not, but if you reference a DOM element, the image is not resizable within the canvas element.

Here is an example:
http://jsfiddle.net/Tn2vh/

FF misbehaving with image scaling

Just found this errant behavior in Firefox (version 17.0.1). When a canvas includes an image and text, and the image is scaled up (to say 1.2), and has a mouseover function then on moving the mouse onto the canvas, the text also scales up. My experimentation showed that only the next element is scaled up (and not the entire canvas). For example, if the canvas includes 2 images (one of which is scaled), and then text, on the mouse entering the canvas, the second image scales up, while the text remains.

This does not happen in Chrome 23.0.1271.95 m, nor on InternetExplorer (9.0.8112).

basic addLayer test stopped working

Caleb,

The following code is almost identical to the first example under the "Adding Layers" doc. This code works in 5b69e28 (6/12/2012 5:53p) but doesn't draw a rectangle at all in 02da01c (6/12/2012 6:11p). I tried backing out a few individual changes from this latest rev, but wasn't able to pinpoint the line of code causing this change. Any ideas?

~ Dave

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jCanvas trivial addLayer, drawRect demo</title>
  <style>
    html, body { width:100%; height:100%; margin: 0px;}
    canvas { display:block; }
  </style>
</head>
<body>
  <div id="content">
    <canvas id="bg"></canvas>
  </div>
  <script src="public/resources/jquery/jquery-1.7.2.min.js"></script>
  <script src="public/resources/jcanvas/jcanvas.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#bg").addLayer({method: "drawRect", fillStyle: "green", x: 10, y: 10,
                         width: 40, height: 95, fromCenter: false})
      .drawLayers();
    });
  </script>
</body>
</html>

Different opacity levels for stroke and fill

Hi Caleb

Have you ever thought to offer among options for drawing functions two different opacity level, one for fillStyle and another for strokeStyle ?

It would allow a cute effect like attached image

I hope this is right section for this "issue"

Bye, and thank you ;)

Dario

Setting canvas proprieties

I was not able to find a way of getting and setting the background proprieties (background = bottom layer).

animating layers stopped working

Hey Caleb,

On FF 14.0.1 on Windows 7, In the transition from b2bdf6c (Aug 7) to 03aa5ad (Aug 13), the following code stopped working. In the latter, only the rectangle & circle display in their original positions, the text and line don't appear at all, and no animation occurs at all. Let me know if I'm misusing the API.

Thanks,

~ Dave

$(document).ready(function(){
  $("canvas").addLayer({
    name: "aRect", method: "drawRect", fillStyle: "#61c",
    x: 210, y: 123.4, width: 75, height: 40.3})
  .addLayer({
    name: "aCircle", method: "drawArc", fillStyle: "#1e6",
    opacity: 0.4, x: 200, y: 130, radius: 25})
  // add layer with my favorite Xenoblade Chronicles line
  .addLayer({
    name: "aText", method: "drawText", fillStyle: "red",
    x: 234, y: 122, fromCenter: false, text: "Riki sneaky!", opacity: 0.7})
  .addLayer({
    name: "horizontal-beam", method: "drawLine", strokeStyle: "purple",
    strokeWidth: 4, x1: 0, y1: 200, x2: 200, y2: 200})
  // Draw each layer onto the canvas
  .drawLayers()
  .animateLayer("horizontal-beam", {x1: 50, y1: 175, x2: 275}, 4000)
  .animateLayer("aText", {rotate: 45}, 7000)
  .animateLayer("aCircle", {x: 100, y: 200, radius: 45}, 3000)
  .animateLayer("aRect", {x: 45, y: 75, rotate: -720}, 8000);
  var layers = $("canvas").getLayers();
  // comment out the following line to allow animations to complete
  stopAnimationsSlowly(layers, 0);

  function stopAnimationsSlowly(layers, LL) {
    if (LL<layers.length) {
      setTimeout(function() {
        $("canvas").stopLayer(layers[LL].name, true);
        stopAnimationsSlowly(layers, ++LL);
      }, 500*(LL+1));
    }
  }
});

getLayerGroup not working as expected

Caleb,

Using jCanvas d0fba05 and jQuery 1.8.2, I can't make getLayerGroup work (tested on both FF 16.0.2 and Chromium-derived 22.0). The layers documentation for this function is a bit short, so perhaps I'm just not using the function as you intended? Here's the code I tried (note the very similar commented-out code that DOES animate the group):

$("canvas").addLayer({method: "drawRect", fillStyle: "#61c",
  group: "circleAndRect", opacity: 1.0, x: 210.0, y: 123.4,
  width: 75.0, height: 40.3})
.addLayer({method: "drawArc", fillStyle: "#1e6", group: "circleAndRect",
  opacity: 0.4, x: 200.0, y: 30.0, radius: 42.0})
.drawLayers();
var aLayerGrp = $("canvas").getLayerGroup("circleAndRect");
// DKS - as of 2012-10-29, the following line doesn't animate
$("canvas").animateLayerGroup(aLayerGrp, {y: 200, opacity: 0.3}, 4000,
// DKS - the following method (as an alternative to prior line) DOES animate
// $("canvas").animateLayerGroup("circleAndRect", {y: 200, opacity: 0.3},
//                               4000,
  function() {
// DKS - also 2012-10-29, doesn't work (depends on getLayerGroup above).
    $("canvas").setLayerGroup(aLayerGrp,
                              {fillStyle: "#A22", opacity: 1})
  }

~ Dave

support for multiple object hierarchy

It did not help me to write more two level class to support oops

is there any example to show this ? Using extending, we can just create a single sub class, but can not create another subclass from derived subclass

class OneLevel
{
}
class TwoLevel:OneLevel
{
}

class ThreeLevel:TwoLevel
{
}

sequenced animation, rectangle no longer displays/animates

On both FF 15.0.1 and Chromium 21.0-derived, the following code worked in e8c45f3, but stopped displaying or animating the purple rectangle in e99d04d.

var aRectX = 210;
var aRectY = 123.4;
var aCircleX = 200;
var aCircleY = 130;
$("canvas")
  .addLayer({name: "aRect", method: "drawRect", fillStyle: "#61c",
             x: aRectX, y: aRectY, width: 75, height: 40.3})
  .addLayer({name: "aCircle", method: "drawArc", fillStyle: "#1e6",
             opacity: 0.4, x: aCircleX, y: aCircleY, radius: 25})
  .drawLayers()
  // the following animations are sequential per layer, simultaneous
  //    across layers
  .animateLayer("aRect", {x: aRectX+100, y: aRectY+100}, 800)
  .animateLayer("aCircle", {x: aCircleX+50, y: aCircleY-80})
  .animateLayer("aRect", {x: aRectX, y: aRectY}, 800)
  .animateLayer("aCircle", {x: aCircleX, y: aCircleY})
  // use callbacks sequential across layers, instead
  .animateLayer("aRect", {x: aRectX+100, y: aRectY+100}, 800,
    function() {
      $("canvas")
        .animateLayer("aCircle", {x: aCircleX+50, y: aCircleY-80},
          function() {
            $("canvas")
              .animateLayer("aRect", {x: aRectX, y: aRectY}, 800,
                function() {
                  $("canvas")
                    .animateLayer("aCircle", {x: aCircleX, y: aCircleY},
                      function() {
                        $("#better").show();
                      });
                })
          })
    });

animating multiple layers but same group

So,

I have this code

for(i = 1; i < 5; i++){
$('canvas').drawImage({
width: w,
source: "images/image.png",
layer: true,
group: 'image',
x: 0,
y: height*(i),
fromCenter: false
})
}

$('canvas').animateLayer(image, {
y: 5000
}, 10000, 'swing', function(){
first.y = 0;
})

It does not work and I would like to know if this is possible to do.. I would like to have multiple images on top of each other and animate them as one single image to move downwards...

drawImage resets cropFromCenter when updated.

When a layer is updated with a drawn image on it to change the cropped X and Y positions, the cropFromCenter property is set to true inherently.

[Edit]
Seems to not happen as described. I'll update further if I find anything.

RemoveLayer('layername') removes wrong layers when the 'layername' doesn't exist

Using version 5.5 and 6.0b.

If you create 3 Layers with their own layer names. Then remove a layer using removeLayer('layername') and run the function again subsequent layer.

$("canvas").addLayer({
method: "drawRect",
name: 'rect1',
fillStyle: "#585",
x: 50, y: 100,
width: 50, height: 50
})
.drawLayers();
$("canvas").addLayer({
method: "drawRect",
name: 'rect2',
fillStyle: "#5b5",
x: 100, y: 100,
width: 50, height: 50
})
.drawLayers();
$("canvas").addLayer({
method: "drawRect",
name: 'rect3',
fillStyle: "#535",
x: 150, y: 100,
width: 50, height: 50
})
.drawLayers();
$('canvas').click(function() {
$("canvas").removeLayer('rect3') .drawLayers();
});

You can then click 3 times and remove all items. There is a error in the logic code...

Not able to chain calls to removeLayer using v5.4

It seems that when using v5.4, you can'tt chain calls to removeLayer. Here's my test code from Issue #18:

var MyObj = {
    canvas: $('<canvas />'),

    addLayer: function() {
        this.canvas.addLayer(this.drawLines);
    },

    drawLines: function lines(ctx) {
        console.log('MyObj.drawLines is being called');
        console.log('"this" context = ', this);
    }
}

Here's what I see when using v5.3.1:

MyObj.canvas.addLayer({ method:'drawRect', name:'myBox', fillStyle:'#585', x:100, y:100, width:100, height:50 });
MyObj.canvas.addLayer({ method:'drawRect', name:'myBox2', fillStyle:'#585', x:100, y:100, width:100, height:50 });
MyObj.canvas.getLayers().length;                            // 2
MyObj.canvas.getLayer('myBox');                             // Object
MyObj.canvas.getLayer('myBox2');                            // Object
MyObj.canvas.removeLayer('myBox').removeLayer('myBox2');    // [<canvas>]
MyObj.canvas.getLayers().length;                            // 0

And with v5.4:

MyObj.canvas.addLayer({ method:'drawRect', name:'myBox', fillStyle:'#585', x:100, y:100, width:100, height:50 });
MyObj.canvas.addLayer({ method:'drawRect', name:'myBox2', fillStyle:'#585', x:100, y:100, width:100, height:50 });
MyObj.canvas.getLayers().length;                            // 2
MyObj.canvas.getLayer('myBox');                             // E
MyObj.canvas.getLayer('myBox2');                            // E
MyObj.canvas.removeLayer('myBox').removeLayer('myBox2');    // TypeError: Cannot call method 'removeLayer' of undefined

I'd initially thought it was failing as no layer existed with the name I was trying to remove - but it happens when removing layers that are present as well.

Dan

[fr] Add arrow heads to lines?

This would be a great feature (I think): the possibility of adding arrow heads to all lines/arcs/etc.

http://www.dbp-consulting.com/tutorials/canvas/CanvasArrow.html

remove "version" from jCanvas Object documentation page

To avoid the confusion raised recently on stackoverflow, recommend eliminating the final bullet on the jCanvas Object documentation page, which currently says "version: The current jCanvas version." version is no longer a feature of the jCanvas Object.

make a shape clickable

Is it possible to assign a click handler to a drawn shape?

simple drawArc not working on Chromium 22

jQuery 1.8.2, jCanvas 2009534, on Chromium 22.0, basic drawArc not working. Same code DOES work on FF 17.0. I will send a pull request with unit test after submitting this issue.

"TypeError evaluating 'layers.push'" when $("canvas").addLayer()

When we are creating a layer, we got an error.
We are using Safari 5.1 on Mac OS X Lion 10.7.

<canvas width="594" height="806"></canvas>
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/jcanvas.js"></script>
<script>
    $("canvas").addLayer({
        method: "drawRect",
        fillStyle: "#37b",
        x: 100, y: 100,
        width: 80, height: 40
    });
</script>

TypeError: 'null' is not an object (evaluating 'layers.push') jcanvas.js:974

// Currently:

    layers = $.data(elem, 'layers');
    // Create layers array if none exists
    if (layers === undefined) {
        layers = [];
        $.data(elem, 'layers', layers);
    }

// Fixed it with:

    layers = $.data(elem, 'layers');
    // Create layers array if none exists
    if (layers === null || layers === undefined) {
        layers = [];
        $.data(elem, 'layers', layers);
    }

Infinite looping on trying to set a maxWidth on single word text

Please close this down as duplicate or invalid. Have submitted another one with a code patch.

Pattern Layer

I have this code:

function draw(patt){
$('canvas').drawRect({
fillStyle: patt,
//x: 0,
y: 0,
width: 9000,
height: 10800,
fromCenter: false,
layer: true,
name: 'first'
});
}

var patt = $('canvas').pattern({
    source: "images/image.png",
    repeat: "repeat-y",
    width: 300,
    height: 10800,
    load: draw,
    layer: true,
    name: 'first'
})

but when i try to animate layer named first it doesn't animate...

animation sequencing across multiple layers possible?

Caleb, I modified your animation sandbox code by adding a second shape, and animating on the opacity property as we discussed yesterday. This is still not working the way I want. As you can tell, the blue ring animation starts simultaneously with the rectangle animation. I don't want the blue ring animation to start until after the rectangle animation is complete. Am I doing anything wrong? Thanks, ~Dave

// Create a jCanvas layer
$("canvas").addLayer({
  method: "drawRect",
  name: "myBox",
  fillStyle: "#47c",
  x: 50, y: 50,
  width: 0, height: 0
}).addLayer({
  method: "drawArc",
  name: "blueRing",
  strokeStyle: "blue", fillStyle: "none",
  strokeWidth: 2, x: 125, y: 250, radius: 30,
  opacity: 0
});

// Animate object properties
$("canvas")
.animateLayer(0, {
  x: 150, y: 150,
  width: 100, height: 50
}, 1000)
.animateLayer("myBox", {
  fillStyle: "rgb(204, 51, 51)",
  x: 300, y: 100,
  angle: 360
}, "slow", "swing")
.animateLayer("blueRing", {
  opacity: 1
}, 2000, "swing");

"Functions as Layers" issue

Caleb - First, thanks for the drag-drop feature, that looks like a great addition. I wanted to let you know that between revisions 39dd4bd (yesterday) and 996b3d1 (today), some of my test code modeled after the first example code in your "Functions as Layers" docs (http://calebevans.me/projects/jcanvas/docs.php?p=layers) stopped working.

Doesn't work with Chromium on Archlinux

On my Archlinux system with:

$ uname -a
Linux laptop 3.4.5-1-ARCH #1 SMP PREEMPT Mon Jul 16 20:28:56 UTC 2012 i686 GNU/Linux

Chromium: Version 21.0.1180.57 (148591)

Just no drawings are visible. When manually getting a 2d-context and filling styles, it works. When using Firefox on the same machine jcanvas works.

Update: Just drawArc() doesn't work, the other shapes do.
Update 2: With start and end params, the drawing works.
Update3: Seems the problem occures when drawing a full cycle (360°)

animateLayerGroup() doesn't work as expected for opacity

Caleb,

Green circle and purple rectangle added in a layer group. Animating both downward as a group works as expected, but only the first added layer fades (second added layer does not fade). Behavior identical on FF 15.0.1 and Chromium-derived 21.0:

More weirdness: this identical code works as expected (fades both layers) in the Sandbox on http://calebevans.me/projects/jcanvas/sandbox.php, but not in my own standalone code using jCanvas bce13cc and jQuery 1.8.2. Ideas?

$("canvas")
  .addLayer({
    method: "drawRect",
    fillStyle: "#61c",
    group: "circleAndRect",
    opacity: 1.0,
    x: 210.0, y: 123.4,
    width: 75.0, height: 40.3
  })
  .addLayer({
    method: "drawArc",
    fillStyle: "#1e6",
    group: "circleAndRect",
    opacity: 0.4,
    x: 200.0, y: 30.0,
    radius: 42.0
  })
  .drawLayers()
  // both layers move, only FIRST ADDED layer fades
  .animateLayerGroup('circleAndRect', {y: 200, opacity: 0}, 4000);

breaking change in v13

Hi!

I recently updated to the latest version of jCanvas and after some head scratching I found that code that was working in v12 is now broken. Mostly what we are doing is drawing arcs as follows:
drawArc({

            name: doc._id,
            group: "docs",
            layer: true,
         ....
            mouseover: mouseOver,
            mouseout: mouseOut
        });

The first problem is that the arcs never show up. But there are also no errors. However, when we call drawLayer, we get errors indicating that there are no layers. When it makes the call to getCanvasData, the object returned is empty. To be clearer, it is not just empty of layers, it is completely empty.

Replacing the jcanvas.js file with the last version fixes the problem.

If there is any way I can help to fix this, or provide more info. Please let me know.
TIA,
Terry

draggable property doesn't work with drawLine

Hi
thank you for your excellent work!

draggable property seems to be not working on drawLine layers

$("canvas").drawLine({
  layer: true,
  strokeStyle: "#900",
  strokeWidth: 3,
  fillStyle: "F90",
  x1: 50, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 50, y4: 50,
  draggable: true,
  bringToFront: true
});

Am I wrong? thank you!
Dario

basic animation fails in jQuery getComputedStyle() in FF 15.0.1

Caleb,

Sorry I'm a little late in reporting this, but in the transition from jcanvas e535864 to f7511e1, the following simple animation of a vertical line moving from left to right stopped working on Firefox 15.0.1 on Windows 7 Enterprise (64bit).

$("canvas")
  .addLayer({
    method: "drawLine", name: "vertical-beam", strokeStyle: "#f00",
    strokeWidth: 4, x1: 40, y1: 40, x2: 40, y2: 900, opacity: 0
  })
  .animateLayer("vertical-beam", {x1: 500, x2: 500, opacity: 1}, 4000);

Using jcanvas version f7511e1 (and later versions), Firebug reports the following error: "NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]" on line 6674 of jquery-1.8.1.js.

This same code works fine on a Chromium 21.0-derived browser.

~ Dave

Beta.. MeasureText raises error

Hi,

Thanks again for the great lib.

I have noticed that there is an issue with the following function....

Error states that 'e' is undefined. I added line noted just to get around it..

// Measure text width/height using the given parameters
$.fn.measureText = function(args) {
    var $elems = this, ctx,
        params;

    if (args !== UNDEFINED && typeof args !== 'object') {
        // If layer identifier is given, get that layer
        params = $elems.getLayer(args);
    } else {
        // If object is given, just use that
        params = merge(new Prefs(), args);
    }

    ctx = getContext($elems[0]);
    if (ctx && params.text !== UNDEFINED) {
        // Calculate width and height of text

 var e = undefined; // THIS LINE ADDED TO AVOID ERROR

        measureText($elems[0], e, ctx, params, params.text.split('\n'));  // ERROR HERE
    }
    return params;
};

Sam

shadows with strokes

Caleb - strokes and shadows don't seem to play together nicely on either Firefox or SRWare Iron. I'm emailing you screenshots (can't find a way to upload them to github) - results differ between FF & Iron, but look the same on both SRWare Iron 18 & 19. ~Dave

.drawArc({
  fillStyle: "white", shadowColor: "#000",
  shadowBlur: 5, shadowX: -5, shadowY: 5,
  x: 50, y: 50, radius: 30
})
.drawArc({
  fillStyle: "white", strokeStyle: "black",
  strokeWidth: 1, shadowColor: "#000",
  shadowBlur: 5, shadowX: -5, shadowY: 5,
  x: 50, y: 125, radius: 30
})
.drawArc({
  fillStyle: "white", strokeStyle: "black",
  strokeWidth: 2, shadowColor: "#000",
  shadowBlur: 5, shadowX: -5, shadowY: 5,
  x: 50, y: 200, radius: 30
})
.drawRect({
  fillStyle: "yellow", shadowColor: "grey",
  shadowBlur: 5, shadowX: 5, shadowY: 5,
  x: 90, y: 20, width: 40, height: 60,
  fromCenter: false
})
.drawRect({
  fillStyle: "yellow", strokeStyle: "black",
  strokeWidth: 1, shadowColor: "grey",
  shadowBlur: 5, shadowX: 5, shadowY: 5,
  x: 90, y: 95, width: 40, height: 60,
  fromCenter: false
})
.drawRect({
  fillStyle: "yellow", strokeStyle: "black",
  strokeWidth: 2, shadowColor: "grey",
  shadowBlur: 5, shadowX: 5, shadowY: 5,
  x: 90, y: 170, width: 40, height: 60,
  fromCenter: false
});

layers not updated

Hi,

When I use getLayer() and set an option (e.g. fillStyle) the layers are not updated until I move the mouse into the canvas. The same happens if I use setLayer().

When the layers already drawn and I use drawLayers() (to redraw the layers - I hope this is the right function) the following error was thrown:

eventCache is undefined

jcanvas.js (line 1677)

removeLayer does not work?

Maybe I do not understand the API well enough, but it seems like 'removeLayer' does not remove the actual figure in it?

View in sanbox

Wrapping text fails when last word doesn't fit in maxWidth

I know is in beta but in case you didn't notice...

When wrapped text ends in a word that doesn't fit in maxWidth, wrapText function keeps looping forever.

I don't know what would be the best solution in this case, maybe we have to start cutting words.

Toggle click

Hey, I was wondering if its possible to achive something like toggle function in jquery on object or layer?

Cursor set on Line bubble up to whole canvas

Hi
Using this code to draw a "shape"

var poly = {
    layer : true,
    name : sensorId + "SensorArea",
    group : sensorId,
    fillStyle : fillColor,
    strokeStyle: color,
    strokeWidth: 2,
    opacity : 1.0,
    closed: true,
    rounded : true,
    draggable: true,
    cursor: "move",
    mousedown: function(layer){
        ...
    },
    dragstart : function(layer) {
            ...
    },
    drag : function1,
    dragstop: function2

};

    for ( var p = 0; p < verticesNumber; p += 1) {
        poly["x" + (p + 1)] = sensorXCoords[p];
        poly["y" + (p + 1)] = sensorYCoords[p];
    }

    $("#canvas").drawLine(poly)

"Sometimes" I obtain this weird situation:

<canvas id="videoCanvas" width="352" height="288" style="cursor: move;">

so I have "move" cursor on whole canvas!

I cannot reproduce exactly this bug... so I omitted binded functions.
If I will have more information in order to reproduce the bug, I'll inform you

Bye ;)

Dragging functionality request......

Hi,

looking at the following sandbox example "Masking Draggable Shapes"....

http://calebevans.me/projects/jcanvas/docs.php?p=masking

dragging the green square inside of the blue mask works very well. However I was noticing that you can also drag the green square around by the 'unseen' masked portion of the square. I am experiencing some 'interference' in masking regions and their draggable contents, and I was wondering if there is a way I can avoid this behavior.

Thanks,
Sam

Allow base64 images as source in the displayImage method.

Version: 5.2.1
Hi! I'm trying to perform changes (rotation) on an image using a secondary canvas and then adding its base64-url that I get from getCanvasImage into the primary canvas via the drawImage method.
But this isn't working and I'm getting any errors, either.

Here is a part of my code

<canvas class="canvas" height="1000px" width="1000px">You need a browser that supports canvas to use this app.</canvas> 
<canvas class="bgcanvas" height="1000px" width="1000px">You need a browser that supports canvas to use this app.</canvas>
<img class="bgcanvasimg" />
<script type="text/JavaScript">
(function(img) {
                                                      $(".bgcanvas").clearCanvas();

                            var image_data = $(".bgcanvas").rotateCanvas({angle: -prev_rot, fromCenter:true, inDegrees:true})
                                .rotateCanvas({angle: img.rotation, fromCenter:true, inDegrees:true})
                                .drawImage({
                                  source: img.src,
                                  height: img.height,
                                  width: img.width,
                                  fromCenter: false
                                }).saveCanvas().getCanvasImage();
                            prev_rot =  img.rotation;
                            window.open(image_data);
                            //$(".bgcanvasimg").attr("src", image_data);
                            $(".canvas").drawImage({
                                  source: image_data,//$(".bgcanvasimg")[0],
                                  x: 0,
                                  y: 0,
                                  fromCenter: false
                                });
})({"id":"obj_16","src":"elements/bird.png","width":50,"height":50,"top":337,"left":73,"rotation":"0"});
</script>

Also here is a tweak on one of your displayImage example to better explain the problem:

var img = $("canvas").drawImage({
  source: "images/fish.jpg",
  x: 50, y: 50,
  width: 80,
  height: 100,
  fromCenter: false
}).getCanvasImage();
//var ob = $("<img/>").appendTo("body").attr("src", img);
$("canvas").drawImage({
  source: img,//ob[0],
  x: 90, y: 90,
  width: 80,
  height: 100,
  fromCenter: false
})

Both directly including the base64-source and doing it via an image aren't working for some-reason....
Thanks for a great plugin, by the way and your docs are pretty neat too :)

text animation issue in both FF and Chromium-derived

The following "raindrops with breadcrumbs" animation works on Chromium-derived 21.0 with jCanvas b47e419, but not on later versions. This code won't show any animation at all with FF 15.0.1 with any version of jCanvas that I've tried:

function addBreadcrumbCount(ii, xx, yy, opacityValue) {
  $("canvas")
    .addLayer({name: "crumb-count-" + ii,
               method: "drawText", fillStyle: "red", strokeStyle: "red",
               x: xx, y: yy, font: "16pt Verdana",
               fromCenter: false, text: ii+1, opacity: opacityValue});
}
function fadeLayer(name, opacity, speed /* , afterFn */ ) {
  if (3 == arguments.length) {
    $("canvas").animateLayer(name, {opacity: opacity}, speed);
  } else if (4 == arguments.length) {
    $("canvas").animateLayer(name, {opacity: opacity}, speed, arguments[3]);
  }
}
function raindrop(ii, width, height) {
  if (ii<10) {
    xx = Math.random() * width;
    yy = Math.random() * height;
    $("canvas")
      .addLayer({name: "ring-" + ii,
                 method: "drawArc", strokeStyle: "blue",
                 strokeWidth: 2, x: xx, y: yy, radius: 10, opacity: 0});
      addBreadcrumbCount(ii, xx, yy, 0);
      fadeLayer("ring-"+ii, 1, 0);
      $("canvas")
        .animateLayer("ring-" + ii, {radius: 30, opacity: 0}, 500,
          function () {
            fadeLayer("crumb-count-"+ii, 1, 0,
                      raindrop(++ii, width, height)
                     );
          }
        );
  }
}
$(document).ready(function(){
  var height = 1000;
  var width  = 1000;
  raindrop(0, width, height);
});

If I comment out the "addBreadcrumbCount" call and replace the 'fadeLayer("crumb-count...' call with simply making the recursive call to "raindrop" (effectively taking the text animations out of the equation), then the "raindrops" animate on both Chromium-derived 21.0 and FF 15.0.1 using the latest jCanvas 0b8a951.

Is it possible to add opacity to linear gradient?

I'm trying to create a rectangle that has a gradient and is also opaque. is there something I can add to my .gradient() method to achieve this?

loop through drawRect

say I wanted to create multiple rectangles by looping through the drawRect method. Each new needs a greater y value so that they do not over lap. How could one do this?

drawRect fails to render a rectangle

Hi Caleb,

In the upgrade from 7501e28 to e535864, the following test code no longer displays or animates the purple rectangle. I tested on Win 7, Firefox 14.0.1 with both jQuery 1.7.2 and 1.8.0, but both have this same problem. Since this involves drawRect, I'm assuming it's related to your change on either line 1252 or 1256 in e535864.

Thanks,

~ Dave

$(document).ready(function(){
  var aRectX = 210;
  var aRectY = 123.4;
  var aCircleX = 200;
  var aCircleY = 130;
  $("canvas")
    .addLayer({name: "aRect", method: "drawRect", fillStyle: "#61c",
               x: aRectX, y: aRectY, width: 75, height: 40.3})
    .addLayer({name: "aCircle", method: "drawArc", fillStyle: "#1e6",
               opacity: 0.4, x: aCircleX, y: aCircleY, radius: 25})
    .drawLayers()
    // the following animations are sequential per layer, simultaneous
    //    across layers
    .animateLayer("aRect", {x: aRectX+100, y: aRectY+100}, 800)
    .animateLayer("aCircle", {x: aCircleX+50, y: aCircleY-80})
    .animateLayer("aRect", {x: aRectX, y: aRectY}, 800)
    .animateLayer("aCircle", {x: aCircleX, y: aCircleY})
    // use callbacks sequential across layers, instead
    .animateLayer("aRect", {x: aRectX+100, y: aRectY+100}, 800,
      function() {
        $("canvas")
          .animateLayer("aCircle", {x: aCircleX+50, y: aCircleY-80},
            function() {
              $("canvas")
                .animateLayer("aRect", {x: aRectX, y: aRectY}, 800,
                  function() {
                    $("canvas")
                      .animateLayer("aCircle", {x: aCircleX, y: aCircleY});
                  })
            })
      });
});

Not able to retrieve a function layer by name using v5.4

Hi,

I've just tested some of my code against v5.4, and found that it's no longer possible to retrieve a function layer by its name as you can with non-function layers. This is possible with v5.3.1.

Take the following scenario:

var MyObj = {
    canvas: $('<canvas />'),

    addLayer: function() {
        this.canvas.addLayer(this.drawLines);
    },

    drawLines: function lines(ctx) {
        console.log('MyObj.drawLines is being called');
        console.log('"this" context = ', this);
    }
}

Under v5.3.1, here's what I got:

MyObj.addLayer()
    'MyObj.drawLines is being called'
    "this" context = <canvas>

MyObj.canvas.getLayer('lines')
    function lines(ctx) { console.log(...) }

MyObj.canvas.getLayers()
    [function lines(ctx) { console.log(...) }]

Under v5.4, here's what I get:

MyObj.addLayer()

MyObj.canvas.drawLayers()               // this is no longer automatic, but I've included it to give a fair comparison
    'MyObj.drawLines is being called'
    "this" context = <canvas>
    [<canvas>]   

MyObj.canvas.getLayer('lines')
    undefined

MyObj.canvas.getLayers()
    [function (Y){return W.call(this,Y)}]

While on the subject of function layers, would it be possible to add a facility to provide a context for "this" when adding the layer? At present, "this" refers to the canvas - which is fine in some cases. However, it would be nice to be able to override this without having to restort to code like this:

var MyObj2 = {
    canvas: $('<canvas />'),

    addLayer: function() {
        var boundLinesFunc = $.proxy(this.drawLines, this);
        this.canvas.addLayer(function lines(ctx) { boundLinesFunc(ctx) });
    },

    drawLines: function lines(ctx) {
        console.log('MyObj2.drawLines is being called');
        console.log('"this" context = ', this);
    }
}

The reason for the named local function in the call to this.canvas.addLayer() is because $.proxy doesn't keep the function name. I could probably use .call() or .apply() here, but I think it would make code flow much easier if the context could be set when the layer was added.

Thanks!

Dan

$().drawImage draws only a slice when big images are used

I'm currently using an image 1920x1080 in a canvas of same size.

However when I do:

$('canvas').drawImage({source: '/media/bigfile.jpg'});

I get only a slice of the image. The slice is only 960x540 pixels and consists of the bottom right corner of the original image.

I tried also to use the native canvas API and this problem didn't show up.

I used:

var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.src = '/media/bigfile.jpg';
  img.onload = function(){
    ctx.drawImage(img, 0, 0);
};

I'm using Firefox 16.0.2

caleb531 / jcanvas Goto Github PK

jcanvas's People

Contributors

Stargazers

Watchers

Forkers

jcanvas's Issues

The Issue

Code to Reproduce Issue:

Recommend Projects

Recommend Topics

Recommend Org