Question

Not really LaTeX related, but...



How can I modify image size in canvas? @rational

Answer 1

For example if I want to put this (attachment) into canvas;

Answer 2

Yeah/ how did you do that?

Answer 3

earlier script is automatically resizing the image to 500x300 creating that blur

Answer 4

one sec il put the updated script

Answer 5

try this

$.getScript(' http://assets.openstudy.com/updates/attachments/556184f6e4b0e23384b8d22f-rational-1432454693607-draw.js')

Answer 6

you may have to refresh the page before getting that script in console

Answer 7

It works, thanks!

Answer 8

it is very easy to play wid canvas
i can show u if u know a bit of javascript

Answer 9

I do know a bit of javascript, but this doesn't look short and nice haha.

http://assets.openstudy.com/updates/attachments/556184f6e4b0e23384b8d22f-rational-1432454693607-draw.js

then again I am not familiar using javascript on canvas.

Answer 10

Ahh thats because i have minified it so that it loads faster

Answer 11

try this in console:

```
var canvas = $('#drawing-dialog .canvas').data()["whiteboard"].canvas;
```

Answer 12

open drawing board before typing that

Answer 13

that gives you the canvas object
now we can draw anything we want using that object

Answer 14

for example, to draw a circle, we do :

```
canvas.circle(100, 100, 50);
```

Answer 15

woah

Answer 16

is it working

Answer 17

yeah it does

Answer 18

pretty easy

Answer 19

to insert an image try this :

```
canvas.image(url, x, y, width, height);
```

Answer 20

What do you enclose URL with? quote, right? because it doesn't work?

Answer 21

yes double quotes, example

canvas.image(" http://assets.openstudy.com/updates/attachments/556184f6e4b0e23384b8d22f-geerky42-1432454398350-123-thumbnail.png ", 0, 0, 500, 500);

Answer 22

Still doesn't work. Error is "Cannot read property 'image' of null"

Answer 23

after opening drawing board, did u assign "canvas" variable again ?

Answer 24

type below two commands after opening drawing board :

```
var canvas = $('#drawing-dialog .canvas').data()["whiteboard"].canvas

canvas.image(" http://assets.openstudy.com/updates/attachments/556184f6e4b0e23384b8d22f-geerky42-1432454398350-123-thumbnail.png ", 0, 0, 500, 500);

```

Answer 25

ahh I see. now it works.

Answer 26

it creates a fresh canvas everytime u click draw
so canvas variable needs to be updated

Answer 27

oh I see. I need to go now... Thanks for all helps!

Answer 28

np
for more info look at raphaeljs documentation
http://raphaeljs.com/reference.html#Paper.image

Answer 29

Ahhh, thanks again @rational for the amazing work :D

Answer 30

DEAN!!!!