I was trying to create a sample paint application using HTML 5 canvas. Then I added a button to redraw what user had drawn earlier. I am not sure what I am doing wrong or may be completely wrong. When I click redraw button multiple times it generates some magical animation by drawing lines all over. Even though if I log the starting point of drawing the image its same every time.
Demo: http://jsfiddle.net/BW57H/6/
Steps to reproduce:
Draw some circle or rectangle or something by clicking the mouse and dragging it on the rectangular box. Then click reset and redraw , click redraw couple of times after that and see the result.
I am not sure what I have done. I have not read a lot about Canvas. But I am curious to know what is going on here. Thanks.
html
<body>
<canvas id="paint" width="600px" height="300px"></canvas>
<div id="controls">
<button name="reset" id="reset">Reset</button>
<button name="redraw" id="redraw">Re-Draw</button>
</div>
</body>
css
#paint{
border: solid;
}
js
$(document).ready(function(){
var x, y, context, painter;
var xCounter = 0 , yCounter = 0;
var xarray = [];
var yarray = [];
function init(){
while(document.getElementById("paint") === undefined){
//do nothing
}
console.log("Loaded document now registering events for canvas");
var canvas = document.getElementById("paint");
context = canvas.getContext('2d');
painter = new Painter();
canvas.addEventListener('mousedown', capture, false);
canvas.addEventListener('mouseup', capture, false);
canvas.addEventListener('mousemove', capture, false);
document.getElementById("reset").addEventListener("click",function(){ clearCanvas(canvas);}, false);
document.getElementById("redraw").addEventListener("click", function(){
autoDraw();
}, false);
}
function clearCanvas(canvas){
context.save();
// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
context.restore();
};
function capture(event){
if(event.which !== 1){
return;
}
x = event.layerX;
y = event.layerY;
switch(event.type){
case 'mousedown':
painter.startPaint(event);
break;
case 'mouseup':
painter.endPaint(event);
break;
case 'mousemove':
painter.paint(event);
break;
}
};
var Painter = function(){
var self = this;
self.paintStarted = false;
self.startPaint = function(event){
self.resetRecordingParams();
self.paintStarted = true;
context.beginPath();
context.moveTo(x,y);
self.record();
}
self.endPaint = function(event){
self.paintStarted = false;
self.record();
self.paint(event)
}
self.paint = function(event){
if(self.paintStarted){
context.lineTo(x,y);
context.stroke();
self.record();
}
}
self.record = function(){
xarray[xCounter++] = x;
yarray[yCounter++] = y;
}
self.resetRecordingParams = function(){
xarray = [];
yarray = [];
xCounter = 0;
yCounter= 0;
}
return self;
}
function autoDraw(){
context.beginPath();
console.log('starting at: '+xarray[0]+','+yarray[0]);
context.moveTo(xarray[0],yarray[0]);
for (var i = 0; i < xarray.length; i++) {
setTimeout(drawLineSlowly, 1000+(i*20), i);
};
}
function drawLineSlowly(i)
{
context.lineTo(xarray[i],yarray[i]);
context.stroke();
}
init();
});
You don't have any kind of check to see whether or not you are already drawing, so here is your code with those changes commented, as well as the real-pixel-location fixes (http://jsfiddle.net/upgradellc/htJXy/1/):
$(document).ready(function(){
var x, y, context, painter, canvas;
var xCounter = 0 , yCounter = 0;
var xarray = [];
var yarray = [];
function init(){
while(document.getElementById("paint") === undefined){
//do nothing
}
console.log("Loaded document now registering events for canvas");
canvas = document.getElementById("paint");
context = canvas.getContext('2d');
painter = new Painter();
canvas.addEventListener('mousedown', capture, false);
canvas.addEventListener('mouseup', capture, false);
canvas.addEventListener('mousemove', capture, false);
document.getElementById("reset").addEventListener("click",function(){ clearCanvas(canvas);}, false);
document.getElementById("redraw").addEventListener("click", function(){
autoDraw();
}, false);
}
function clearCanvas(canvas){
context.save();
// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
context.restore();
};
function capture(event){
if(event.which !== 1){
return;
}
tempPos = getMousePos(canvas, event);
x = tempPos.x;
y = tempPos.y;
switch(event.type){
case 'mousedown':
painter.startPaint(event);
break;
case 'mouseup':
painter.endPaint(event);
break;
case 'mousemove':
painter.paint(event);
break;
}
};
var Painter = function(){
var self = this;
self.paintStarted = false;
//this keeps track of whether or not we are currently auto drawing
self.currentlyAutoDrawing = false;
self.startPaint = function(event){
self.resetRecordingParams();
self.paintStarted = true;
context.beginPath();
context.moveTo(x,y);
self.record();
}
self.endPaint = function(event){
self.paintStarted = false;
self.record();
self.paint(event);
}
self.paint = function(event){
if(self.paintStarted){
context.lineTo(x,y);
context.stroke();
self.record();
}
}
self.record = function(){
xarray[xCounter++] = x;
yarray[yCounter++] = y;
}
self.resetRecordingParams = function(){
xarray = [];
yarray = [];
xCounter = 0;
yCounter= 0;
}
return self;
}
function autoDraw(){
context.beginPath();
//If we are already auto-drawing, then we should just return instead of starting another drawing loop cycle
if(painter.currentlyAutoDrawing){
console.log("painter is already auto drawing");
return;
}
painter.currentlyAutoDrawing = true;
console.log('starting at: '+xarray[0]+','+yarray[0]);
context.moveTo(xarray[0],yarray[0]);
for (var i = 0; i < xarray.length; i++) {
setTimeout(drawLineSlowly, 1000+(i*20), i);
};
}
function drawLineSlowly(i)
{
//when we reach the last element in the array, update painter with the fact that autodrawing is now complete
if(xarray.length == i+1){
painter.currentlyAutoDrawing=false;
}
console.log(xarray.length+" "+i);
context.lineTo(xarray[i],yarray[i]);
context.stroke();
}
function getMousePos(canv, evt) {
var rect = canv.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
init();
});
Obviously you don't stop the previous timeout loop before you start a new...
Use setInterval instead of setTimeout, and clearInterval by next push. So I think the problem is not with the canvas, just with your redraw animation. Btw it is strange because there is some difference between the redraw and the original draw...
var drawInterval = null;
function autoDraw(){
if (drawInterval) {
//here your can reset the previous - still running - redraw
clearInterval(drawInterval);
}
context.beginPath();
console.log('starting at: '+xarray[0]+','+yarray[0]);
context.moveTo(xarray[0],yarray[0]);
var i=0;
setInterval(function (){
++i;
if (i<xarray.length)
drawLineSlowly(i);
else
clearInterval(drawInterval);
},20);
}
note:
There is still bug in the redraw, but at least it does not kill the browser...
Btw the strange "animation" is because you does not check by redraw if you are currently drawing or not, so you start draw and redraw together and they interfere... You have to stop redraw when you start drawing.
Related
I am working on a function which enables users to write onto screen where mouse has been clicked however there are a few problems.
Firstly: keyIsPressed is executed multiple times making each key appear more than once with a single click.
Secondly: It will only allow for a single letter to be printed before the mouseX and mouseY are set back to -1.
Here is my code:
function setup() {
createCanvas(400, 400);
var startMouseX = -1;
var startMouseY = -1;
var drawing = false;
}
function draw() {
background(220);
if(mouseIsPressed)
{
startMouseX = mouseX;
startMouseY = mouseY;
drawing = true;
}
else if(keyIsPressed)
{
textSize(20);
text(key,startMouseX,startMouseY);
startMouseX += textWidth(key);
}
else{
drawing = false;
startMouseX = -1;
startMouseY = -1;
}
}
Any help would be appreciated thanks
I think the approach with the 'drawing' variable works.
But instead of drawing the new letter in draw you can use the keyTyped() function. In the same manner you could use mouseMoved() to reset the 'drawing' variable
var drawing = true;
function setup() {
createCanvas(400, 400);
}
function keyTyped() {
if (drawing) text(key, mouseX, mouseY);
drawing = false;
}
function mouseMoved() {
drawing = true;
}
my solution:
let drawing = false;
let drawMouseX = -1;
let drawMouseY = -1;
function setup() {
createCanvas(400, 400);
background("white");
}
function keyTyped(){
if(!drawing){
drawing = true;
drawMouseX = mouseX;
drawMouseY = mouseY;
}
text(key, drawMouseX, drawMouseY)
drawMouseX += textWidth(key);
}
function mouseMoved(){
drawing = false;
}
This makes it so the things you type are permanently on the canvas. Is this what you wanted? if not, it would be a lot harder.
I made this piece of code for turning sound on/off in a game I'm making.
It works great with Google Chrome and IE. Proud as I was I gave the code to my friend who tried it on Firefox..
But he made me sad by saying it didn't work on Firefox...
I don't know why it doesn't work, can somebody tell me what's wrong or maybe what I have to change?
P.S.: "geluidknop" is Dutch for "soundbutton".
var audio = new Audio('Beep.mp3');
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
audio.currentTime = 0;
}
window.addEventListener('keydown', playAudio);
audio.play();
function CanvasApp() {
'use strict'
var canvas = document.getElementById("canvas"),
style = window.getComputedStyle(canvas),
context = canvas.getContext("2d"),
source1 = "geluidaan.png",
source2 = "geluiduit.png",
click = false,
geluidknop = {x: 0, y: 0, width: 1024, height: 768};
geluidknop.aspect = geluidknop.height / geluidknop.width;
geluidknop.width = 500;
geluidknop.height = geluidknop.width * geluidknop.aspect;
canvas.width = parseInt(style.width, 10);
canvas.height = parseInt(style.height, 10);
var img = new Image();
img.onload = function () {
context.drawImage (img, geluidknop.x, geluidknop.y, geluidknop.width, geluidknop.height);
};
img.src = source1;
function changeImage() {
if (click) {
img.src = source2;
} else {
img.src = source1;
}
}
function MouseClick() {
var rect = canvas.getBoundingClientRect(),
x = event.clientX - rect.left,
y = event.clientY - rect.top;
if (x >= geluidknop.x && x <= geluidknop.x + geluidknop.width) {
if (y >= geluidknop.y && y <= geluidknop.y + geluidknop.height) {
if (click) {
click = false;
playAudio();
changeImage();
}else {
click = true;
pauseAudio();
changeImage();
}
}
}
context.save();
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
context.restore();
}
canvas.addEventListener('click', MouseClick);
function restartAudio() {
audio.currentTime = 0;
audio.play();
}
audio.addEventListener('ended', restartAudio);
}
function WindowLoaded() {
'use strict';
CanvasApp();
}
window.addEventListener("load", WindowLoaded);
I think you forgot to pass event to your event handler function. Chrome will fill this in, but Firefox will not.
It should be:
function MouseClick(event) {}
This issue might not be your code, but more likley .mp3 support in firefox.
Dependant on the version of firefox he was using a .mp3 file might not be supported
check out the mozilla docs on audio support
I have a canvas that I can draw things what I want to do is generate new canvases dynamically when clicking a button.I've defined a generate function but it did not work
here is script
//<![CDATA[
window.addEventListener('load', function () {
// get the canvas element and its context
var canvas = document.getElementById('sketchpad');
var context = canvas.getContext('2d');
// create a drawer which tracks touch movements
var drawer = {
isDrawing: false,
touchstart: function (coors) {
context.beginPath();
context.moveTo(coors.x, coors.y);
this.isDrawing = true;
},
touchmove: function (coors) {
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
},
touchend: function (coors) {
if (this.isDrawing) {
this.touchmove(coors);
this.isDrawing = false;
}
}
};
// create a function to pass touch events and coordinates to drawer
function draw(event) {
var type = null;
// map mouse events to touch events
switch(event.type){
case "mousedown":
event.touches = [];
event.touches[0] = {
pageX: event.pageX,
pageY: event.pageY
};
type = "touchstart";
break;
case "mousemove":
event.touches = [];
event.touches[0] = {
pageX: event.pageX,
pageY: event.pageY
};
type = "touchmove";
break;
case "mouseup":
event.touches = [];
event.touches[0] = {
pageX: event.pageX,
pageY: event.pageY
};
type = "touchend";
break;
}
// touchend clear the touches[0], so we need to use changedTouches[0]
var coors;
if(event.type === "touchend") {
coors = {
x: event.changedTouches[0].pageX,
y: event.changedTouches[0].pageY
};
}
else {
// get the touch coordinates
coors = {
x: event.touches[0].pageX,
y: event.touches[0].pageY
};
}
type = type || event.type
// pass the coordinates to the appropriate handler
drawer[type](coors);
}
// detect touch capabilities
var touchAvailable = ('createTouch' in document) || ('ontouchstart' in window);
// attach the touchstart, touchmove, touchend event listeners.
if(touchAvailable){
canvas.addEventListener('touchstart', draw, false);
canvas.addEventListener('touchmove', draw, false);
canvas.addEventListener('touchend', draw, false);
}
// attach the mousedown, mousemove, mouseup event listeners.
else {
canvas.addEventListener('mousedown', draw, false);
canvas.addEventListener('mousemove', draw, false);
canvas.addEventListener('mouseup', draw, false);
}
// prevent elastic scrolling
document.body.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false); // end body.onTouchMove
}, false); // end window.onLoad
function generate(){
var newCanvas = document.createElement('canvas');
newCanvas.width = 400;
newCanvas.height = 400;
document.getElementById('container').appendChild(newCanvas);
ctx = newCanvas.getContext('2d');
}
//]]>
here is jsfiddle http://jsfiddle.net/regeme/WVUwn/
ps:drawing not displayed on jsfiddle however it works on my localhost I have totally no idea about it , anyway what I need is generate function , I did but I think I am missing something..
Any ideas? thanks..
Below is a function I wrote to dynamically create canvas.
If the canvas already exists (same ID) then that canvas is returned.
The pixelRatio parameter can be defaulted to 1. It's used for setting the correct size on retina displays (so for iPhone with Retina the value would be 2)
function createLayer(sizeW, sizeH, pixelRatio, id, zIndex) {
// *** An id must be given.
if (typeof id === undefined) {
return false;
}
// *** If z-index is less than zero we'll make it a buffer image.
isBuffer = (zIndex < 0) ? true : false;
// *** If the canvas exist, clean it and just return that.
var element = document.getElementById(id);
if (element !== null) {
return element;
}
// *** If no zIndex is passed in then default to 0.
if (typeof zIndex === undefined || zIndex < 0) {
zIndex = 0;
}
var canvas = document.createElement('canvas');
canvas.width = sizeW;
canvas.height = sizeH;
canvas.id = id;
canvas.style.width = sizeW*pixelRatio + "px";
canvas.style.height = sizeH*pixelRatio + "px";
canvas.style.position = "absolute";
canvas.style.zIndex = zIndex;
if (!isBuffer) {
var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
}
return canvas;
}
Change the jsfiddle option
"onLoad"
to
"No Wrap - in <body>"
EDIT: See also similar question over here: Uncaught ReferenceError for a function defined in an onload function
JSFiddle options: http://doc.jsfiddle.net/basic/introduction.html#frameworks-and-extensions
This is the working update of your JSFIDDLE
javascript:
document.getElementById('generate').addEventListener('mousedown', generate, false);
I guess this is what you want.
I've just added an eventListener to your button in javascript code itself.
P.S.: I've also added black background color to canvas to show it on white background.
im learnig javascript and try to develop a page to draw on. Change colors and linewidth are already in place. Now it is drawing, but just when I move the mouse. I'd like to add also on click on just on move. So I'm able to draw also points. I have put the drawCircle function in the function stopDraw, but this is not working as it should. Any ideas?
Second problem is that, I'd like to draw a circle without stroke. But as soon as I change the lineWidth, also my circle gets a stroke around. Please help...
// Setup event handlers
cb_canvas = document.getElementById("cbook");
cb_lastPoints = Array();
if (cb_canvas.getContext) {
cb_ctx = cb_canvas.getContext('2d');
cb_ctx.lineWidth = 14;
cb_ctx.strokeStyle = "#0052f8";
cb_ctx.lineJoin="round";
cb_ctx.lineCap="round"
cb_ctx.beginPath();
cb_canvas.onmousedown = startDraw;
cb_canvas.onmouseup = stopDraw;
cb_canvas.ontouchstart = startDraw;
cb_canvas.ontouchend = stopDraw;
cb_canvas.ontouchmove = drawMouse;
}
function startDraw(e) {
if (e.touches) {
// Touch event
for (var i = 1; i <= e.touches.length; i++) {
cb_lastPoints[i] = getCoords(e.touches[i - 1]); // Get info for finger #1
}
}
else {
// Mouse event
cb_lastPoints[0] = getCoords(e);
cb_canvas.onmousemove = drawMouse;
}
return false;
}
// Called whenever cursor position changes after drawing has started
function stopDraw(e) {
drawCircle(e);
e.preventDefault();
cb_canvas.onmousemove = null;
}
//Draw circle
function drawCircle(e) {
var canvasOffset = canvas.offset();
var canvasX = Math.floor(e.pageX-canvasOffset.left);
var canvasY = Math.floor(e.pageY-canvasOffset.top);
//var canvasPos = getCoords(e);
cb_ctx.beginPath();
cb_ctx.arc(canvasX, canvasY, cb_ctx.lineWidth/2, 0, Math.PI*2, true);
cb_ctx.fillStyle = cb_ctx.strokeStyle;
cb_ctx.fill();
}
function drawMouse(e) {
cb_ctx.beginPath();
if (e.touches) {
// Touch Enabled
for (var i = 1; i <= e.touches.length; i++) {
var p = getCoords(e.touches[i - 1]); // Get info for finger i
cb_lastPoints[i] = drawLine(cb_lastPoints[i].x, cb_lastPoints[i].y, p.x, p.y);
}
}
else {
// Not touch enabled
var p = getCoords(e);
cb_lastPoints[0] = drawLine(cb_lastPoints[0].x, cb_lastPoints[0].y, p.x, p.y);
}
cb_ctx.stroke();
cb_ctx.closePath();
//cb_ctx.beginPath();
return false;
}
// Draw a line on the canvas from (s)tart to (e)nd
function drawLine(sX, sY, eX, eY) {
cb_ctx.moveTo(sX, sY);
cb_ctx.lineTo(eX, eY);
return { x: eX, y: eY };
}
// Get the coordinates for a mouse or touch event
function getCoords(e) {
if (e.offsetX) {
return { x: e.offsetX, y: e.offsetY };
}
else if (e.layerX) {
return { x: e.layerX, y: e.layerY };
}
else {
return { x: e.pageX - cb_canvas.offsetLeft, y: e.pageY - cb_canvas.offsetTop };
}
}
Your drawCircle function is wrapped in the canvas's onclick event. It should be
function drawCircle(e) {
var canvasOffset = canvas.offset();
var canvasX = Math.floor(e.pageX-canvasOffset.left);
var canvasY = Math.floor(e.pageY-canvasOffset.top);
cb_ctx.beginPath();
cb_ctx.lineWidth = 0;
cb_ctx.arc(canvasX,canvasY,cb_ctx.lineWidth/2,0,Math.PI*2,true);
cb_ctx.fillStyle = cb_ctx.strokeStyle;
cb_ctx.fill();
}
So you'll have to pass the event object from stop draw as well
function stopDraw(e) {
drawCircle(e); //notice the change here
e.preventDefault();
cb_canvas.onmousemove = null;
}
Note that you're also setting you circle's radius to 0 which might be another reason why it's not showing up.
cb_ctx.lineWidth = 0;
cb_ctx.arc(canvasX,canvasY,cb_ctx.lineWidth/2,0,Math.PI*2,true);
0 divided by 2 is always zero. If you don't want to stroke around the circle just don't call stroke(). the drawCircle function isn't causing that, since there's a beginPath() call. I suspect it's because you don't beginPath() before calling stroke() in drawMouse.
i am trying to make something like paint , in my code user chooses color for drawing , now if the user selects Fill button , the code should fill the whole screen with color user chose in the first case i-e if color was black for stroke style than canvas should be completely black,
in my code , i am getting the correct color , but cant seem to fill the canvas , with it . canvas seems to get to refresh or (stroke style='#fffff' i think)
where is my code
(my complete code now)
my html file
<li>Clear the canvas: <button id="clearCanvasSimple" type="button">Clear</button></li>
<li><span class="highlight">Choose a color: </span>
<button id="choosePurpleSimpleColors" type="button">Purple</button>
<button id="chooseGreenSimpleColors" type="button">Green</button>
<button id="chooseYellowSimpleColors" type="button">Yellow</button>
<button id="chooseBrownSimpleColors" type="button">Brown</button>
</li>
<li>Erase : <button id="chooseEraseSimpleColors" type="button">Erase</button></li>
<li>Fill with colour:<button id="chooseFillSimpleColors" type="button">Fill</button></li>
</ul>
<script type="text/javascript" src="test2.js"></script>
<script>
initGame(null, document.getElementById('movecount'));
</script>
</body>
now test.js
if(window.addEventListener) {
window.addEventListener('load', function ()
{
var canvas;
var context;
var canvasHeight = 500;
var canvasWidth = 1250;
var canvas_simple;
var context_simple;
var tool;
var paint_simpleColors;
// Initialization sequence.
function init ()
{
// Find the canvas element.
var canvasDiv = document.getElementById('canvas');
canvas_simple = document.createElement('canvas');
canvas_simple.setAttribute('height', canvasHeight);
canvas_simple.setAttribute('width', canvasWidth);
canvas_simple.setAttribute('id', 'canvasSimple');
canvasDiv.appendChild(canvas_simple);
if(typeof G_vmlCanvasManager != 'undefined')
{
canvas_simple = G_vmlCanvasManager.initElement(canvas_simple);
}
context_simple = canvas_simple.getContext("2d");
tool = new tool_pencil();
//canvas_simple.addEventListener('mousemove', ev_canvas, false);
canvas_simple.addEventListener('mousedown', ev_canvas, false);
canvas_simple.addEventListener('mousemove', ev_canvas, false);
canvas_simple.addEventListener('mouseup', ev_canvas, false);
clearCanvasSimple.addEventListener('mousedown', function () {OnButtonDown (clearCanvasSimple)}, false);
choosePurpleSimpleColors.addEventListener('mousedown', function () {ButtonDown1 (choosePurpleSimpleColors)}, false);
chooseGreenSimpleColors.addEventListener('mousedown', function () {ButtonDown2 (chooseGreenSimpleColors)}, false);
chooseYellowSimpleColors.addEventListener('mousedown', function () {ButtonDown3 (chooseYellowSimpleColors)}, false);
chooseBrownSimpleColors.addEventListener('mousedown', function () {ButtonDown4 (chooseBrownSimpleColors)}, false);
chooseEraseSimpleColors.addEventListener('mousedown', function () {ButtonDown5 (chooseEraseSimpleColors)}, false);
chooseFillSimpleColors.addEventListener('mousedown', function () {ButtonDown6 (chooseFillSimpleColors)}, false);
// canvas_simple.addEventListener('mousemove', ev_mousemove, false);
}
function tool_pencil () {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context_simple.beginPath();
paint_simpleColors = true;
var radius = 5;
context_simple.lineJoin = "round";
context_simple.lineWidth = radius;
context_simple.moveTo(ev._x, ev._y);
tool.started = true;
};
this.mousemove = function (ev) {
if (tool.started&&paint_simpleColors) {
context_simple.lineTo(ev._x, ev._y);
context_simple.stroke();
}
};
this.mouseup = function (ev) {
if (tool.started) {
paint_simpleColors = false;
tool.mousemove(ev);
tool.started = false;
}
};
}
function ev_canvas (ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
function ButtonDown1 (choosePurpleSimpleColors)
{
context_simple.strokeStyle = "#2E0854";
}
function ButtonDown2 (chooseGreenSimpleColors)
{
context_simple.strokeStyle = "#1DA237";
}
function ButtonDown3 (chooseYellowSimpleColors)
{
context_simple.strokeStyle = "#FFFF00";
}
function ButtonDown4 (chooseBrownSimpleColors)
{
context_simple.strokeStyle = "#A52A2A";
}
function ButtonDown5 (chooseEraseSimpleColors)
{
context_simple.strokeStyle = "#FFFFFF";
}
function ButtonDown6 (chooseFillSimpleColors)
{
context_simple.fillStyle = context_simple.strokeStyle;
context_simple.fillRect(0, 0, canvas.width, canvas.height);
canvas_simple.width = canvas_simple.width;
}
function OnButtonDown (clearCanvasSimple) {
context_simple.fillStyle = '#ffffff'; // Work around for Chrome
context_simple.fillRect(0, 0, canvasWidth, canvasHeight);
canvas_simple.width = canvas_simple.width; // clears the canvas
}
init();
}, false); }
i hope does helps