-
Notifications
You must be signed in to change notification settings - Fork 0
/
elephant.js
65 lines (48 loc) · 1.49 KB
/
elephant.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 5;
var down = false;
var xx,yy,sizeoftext,coloroftext;
canvas.addEventListener('mousemove',draw);
canvas.addEventListener('mousedown',function()
{
down=true;
context.beginPath();
context.moveTo(xPos,yPos);
canvas.addEventListener("mousemove",draw);
});
canvas.addEventListener("mouseup",function(){down=false;});
function draw(e)
{
xPos = e.clientX - canvas.offsetLeft;
yPos = e.clientY - canvas.offsetTop;
if(down==true)
{
xx=xPos;
yy=yPos;
context.lineTo(xPos,yPos);
context.stroke();
}
}
function myFunction()
{
var color=document.getElementById("favcolor").value;
coloroftext=color;
context.lineWidth=5;
context.strokeStyle = color;
context.fillStyle = color;
}
function fillcanvas() {context.fillRect(0,0,canvas.width,canvas.height);}
function eraser() {var color="white"; context.lineWidth = 20; context.strokeStyle=color;}
function brushsize() {var size=document.getElementById("brush").value; context.lineWidth = size; sizeoftext=size;}
function textsee()
{
var textinput=document.getElementById("fineit").value;
context.font=sizeoftext+"px"+" Arial"; // 7. canvas text example storkeText("text",x,y);
//ctx.strokeText("hello",10,20);
/*ctx.font="25px Comic Sans MS"; // 8. Add color and center text
ctx.textAlign="center";*/
context.fillStyle=coloroftext;
//ctx.fillStyle="red";
context.fillText(textinput,xx,yy);
}