pwambach/angular-canvas-painter

Angular.js directive to paint on a canvas on desktop or touch devices

angular-canvas-painter's Issues

add imageSrc width and height

I love your work,
I do some tweak in order to the image width and height match the canvas container

ctx.drawImage(this, 0, 0,options.width,options.height);

Could you add another options to change default canvas ID and download image feature?

How to access canvas content in my angular controller?

Hi. Thank you for this great directive.

I was able to integrate it in my project, but I'm having trouble acessing the canvas content in my Angular controller.

I need to convert the canvas to an image and save it in my database via API.

Thank you in advance,
Rodrigo

Minified js adds four canvases

Just a small bug in angular-canvas-painter.min.js: where you define the templateCache for pwCanvasPaint div, those canvas are also defined causing 4 canvases in the end. So <div class="pwCanvasPaint" style="position:relative"><canvas id="pwCanvasMain"></canvas><canvas id="pwCanvasTmp" style="position:absolute;top:0;left:0"></canvas></div> should change to <div class="pwCanvasPaint" style="position:relative"></div>. It's only in the minified js file.

Offset touch recognized with android browser

Hello, I verified that on mobile android browsing the touch position recognition fails, adding a mostly horizontal offset to the touched point. This happens both on a one plus one phone and on a n7 tablet.

On an iPad it behaves correctly.

I tried with no luck to enable the iOS mode also for android user agents.

If you need i can provide a video of the reproduction.

If i find a solution meanwhile i'll let you know

Best regards
Marco

ng-model

How can I save in MySQL, for future get and redrawing the same?

do you plan the implementation of text insertion?

I think it would be nice some basic text support, something like right-click/insert text here, nothing more.
The text font and size could be configured in the options object.

Maximum file size for drawImage background?

I'm having issues loading larger base64-encoded images into canvas background. I haven't been able to find anything related to a file size limit in the docs or source. Is there something that I'm missing?

Base64 images with character length < 400,000 seem to work fine. But a 700,000 character length one will not load as background image.

Thanks.

pw-canvas Not Loading Sometimes

Hello,

I'm getting an odd error that sometimes, when the page is loaded, the pw-canvas src element is not loaded.
My pw-canvas is under a ui-route template.
Someone have any ideia about why this is not working properly?

Thanks.

Centrally aligned canvas has offset bug

If the canvas is placed within a centrally aligned div (text-align: center) drawing on the canvas produces line that suddenly offset.

Create Canvas with transparent backgroundColor

It is off course more a question than an issue. I would like to give thanks to the author for this wonderful directive concerning on a smooth drawing pattern. I will be working in a project that surely will need to put the hands on some details of this code.

The question by now is:
I need to setup a transparent background for the canvas. Is there a way to create this?
I have tried configuring the backgroundColor property with transparent but no luck.

Help is really appreciated.

reset (to blank) functionality

Hi! I had a need to reset the canvas back to it's empty state. I made a pull request to address this situation.

My suggested api involves setting the value-bound variable to 'reset' instead of a number, and this will run the init() function that simply sets up the directive's canvas as if it had just been compiled.

It's working great in our app so far, I urge you to accept this PR so we can continue using your fork :)

Do you plan to implement also undo function?

angular.min.js:92 GET http://localhost:63342/templates/canvas.html 404 (Not Found)

Hi,
Thanks for the great directive. I use the directive in my project, but the error below appeared:
GET http://localhost:63342/templates/canvas.html 404 (Not Found).
Error: [$compile:tpload] http://errors.angularjs.org/1.4.3/$compile/tpload?p0=..%2Ftemplates%2Fcanvas.html&p1=404&p2=Not%20Found.

The only difference with your demo is I use the directive in the view which is linked by angular routing, I also added the 'pw.canvas-painter' in my module.

Trackpad/Mouse not working on touchscreen-notebooks

For users with a touchscreen-notebook the trackpad / mouse aren't working. I think this is because of line 229 of of https://github.com/pwambach/angular-canvas-painter/blob/master/js/pwCanvas.js because it uses if (!isTouch) {, meaning if a device has touch AND non-touch it won't work?

Zoom

There is any zoom function working with multi-touch?

Thanks

Load existing image into canvas

It would be nice to be able to load an existing image into the canvas by providing a URL. Currently I have to do it in my controller using something like this:

var imageObj = new Image();
imageObj.onload = function () {
 var context = $('#pwCanvasMain').get(0).getContext('2d');
 context.drawImage(this, 0, 0);
};
imageObj.src = 'http://example.org/image.png';

drew line color is black but nothing is selected on DEMO page

Thank you for great library!
I met the following problem.

Environments

OSX 10.11.5
Chrome 46.0.2490.86 (64-bit)

Steps to reproduce

1. open DEMO page (URL: http://pwambach.github.io/angular-canvas-painter/)
2. draw a line

Expected behavior

black is selected on color selector.

Actual behavior

drew line color is black but nothing is selected

The script does not work with OnsenUI

Hi. I'm just starting to deal with Angular.
I want to add to your painter in my application. In a separate file, I have everything works as it should. If I try to add it in my application, canvas is not created. The code is not working. I'll be glad if you look.
www.zip

Is it possible to change the cursor over the canvas to match the "brush" size?

I'm looking for a way to not only change the cursor to a circle when mousing over the canvas (that part isn't really the issue, should be easy enough to figure out) but also change that circle dynamically to match the brush size selected by the slider. Is that possible and if so, how would I need to go about accessing the brush size data? I'm still pretty new to Angular so any ideas or hints are helpful :)

This is a great tool, really enjoying it!

Drawing canvas issue on Mobile devices with Modal window bootstrap

hi,
I faced an issue with pwCanvas when I include it on a bootstrap modal pop up in mobile devices. For basic modal popups it is working fine. But when you have a scrollable page & at the bottom of the page put a button to pop up a bootstrap modal, temp canvas you used in the library couldn't fine the absolute location to draw.

Any idea why it is behaving like that?

Zoom in / out / resize canvas to fit background image

Treat this as a future Enhancement

Dynamically resize the canvas?

Hello,

I have started playing with the canvas-painter, and it looks very promising so far :)

The only thing is that I would like the canvas to take the full width of my page, and it seems the options only accept 'px' width. Do you have any plan to support a '%' width?

On a related note, it looks like you can't resize the canvas once it has been instantiated (the only watched options are related to the drawing style). Is there a reason for this?

Thanks for your work!
Sébastien

directive not working in IE 10 / 11

Hello,

Great plugin!

But it seems that it's not working on IE10 / 11 when using tactile device.

angular-canvas-painter webpack

Angular 1.5.8
Webpack 1.13.2

I'm importing the lib as followed:

import angularCanvasPainter from 'angular-canvas-painter';
export default angular
    .module('projectName', [
        // 3th party
        angularCanvasPainter,

        // application
        components,
        common,
    ])
    .directive('app', appComponent)
;

and getting this error:

Argument 'module' is not a function, got Object

Is webpack not supported? How can I fix this?

Improve iOS detection

Eraser

It's not a bug but a feature.
You library is almost perfect, I would just need an araser and the possibility to add an bacground image.
Is it possible for you ? Or could you just help me to add this features in your directive ?

is possible to know when the canvas has been touched?

Hello, first of all thank you for this directive, you spared me a lot of troubles and it's very well done.

In my app, I have implemented the functionality of persisting the image (via toDataURL) server side. To do this I have a button that "confirms" the modifications done to the canvas and freeze them in the exported image.

I think that would be nice to have a variable that exposes if the canvas has been ever touched, so I can ng-enable my button to this var. Or better to pass an event to the directive that is fired every time a modification is done in the canvas (e.g. in the copyTmpImage function, if I understood well how the directive works).

What do you think about this? I can try to implement it if you're interested, even if I'm not very good with directives yet.

Thanks again
Marco

Add undo feature

Add feature to undo the last action or the last x actions