My PIXASTIC "Lighten.js" filter Javascript and HTML5 code is not working

Question

Here is my code, what am I doing wrong? The image currently is showing up in the browser, but it is not lightened...

Here is my HTML CODE and that is linked to the custom.js file built from their download site (it includes the core and the lighten and that's it)

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" charset="utf-8" src="pixastic.custom (5).js"></script>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
            window.onload = function() {
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                var imageObj = new Image();
                imageObj.onload = function() {
                    var options ={};
                    Pixastic.process(imageObj, "lighten", options)
                        {amount : .5
                    };
                    options.resultCanvas;
                    context.drawImage(imageObj, 80, 60);
                }

                imageObj.src = "IMAG8703.jpg";
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="2000" height="4000"></canvas>
    </body>
</html>

Exact duplicate of [this question by the same user](http://stackoverflow.com/questions/10952343/i-am-having-trouble-processing-my-image-using-html5-canvas-and-javascript-filter). Interesting! — lbstr, Jun 08 '12 at 21:13

lbstr · Answer 1 · 2012-06-08T20:11:58.833

it looks like your syntax for the options is wrong. Either pass the options directly in the process function like this:

Pixastic.process(imageObj, "lighten", {amount: .5});

Or, initialize the options variable with the amount like this:

var options = {amount: .5};
Pixastic.process(imageObj, "lighten", options);

EDIT: Also, it states in the documentation that by calling options.resultCanvas, you get the new canvas. So, it sounds like what you want to do is set that to something like this:

canvas = options.resultCanvas;

My PIXASTIC "Lighten.js" filter Javascript and HTML5 code is not working

1 Answers1