I am new to asp.net signalR and I am trying to allow number of users to draw on canvas. The drawing logic is in a separate js file and I do not understand how to do it....
Here is my html code
<html lang="en">
<head>
<title>Finger Painting</title>
<script src="~/Scripts/draw.js"></script>
</head>
<body>
<div>
<canvas id="canvas" width="1000" height="500" style="background-color:white">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
< div>
<p>Color selected: <span id="color_chosen">Black</span></p>
<p>
<input type="button" id="Black" />
</p>
<p><input type="button" id="reset_image" value="Reset Drawing"/></p>
</div>
</body>
</html>
Here is my javascript code to draw on canvas:
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
var c = document.getElementById('canvas');
var context = c.getContext('2d');
var blackButton = document.getElementById("Black");
var colorChosen = document.getElementById("color_chosen");
var resetButton = document.getElementById("reset_image");
blackButton.addEventListener('click', colorPressed, false);
drawScreen();
function drawScreen() {
c.addEventListener('mousedown', mouse_pressed_down, false);
c.addEventListener('mousemove', mouse_moved, false);
c.addEventListener('mouseup', mouse_released, false);
c.addEventListener('touchmove', touch_move_gesture, false);
context.fillStyle = 'white';
context.fillRect(0, 0, c.width, c.height);
context.strokeStyle = '#000000';
context.strokeRect(1, 1, c.width - 2, c.height - 2);
}
var begin_drawing = false;
function mouse_pressed_down(ev) {
begin_drawing = true;
context.fillStyle = colorChosen.innerHTML;
}
function mouse_moved(ev) {
var x, y;
x = ev.pageX;
y = ev.pageY;
if (begin_drawing) {
context.beginPath();
context.arc(x, y, 7, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
context.closePath();
}
}
function mouse_released(ev) {
begin_drawing = false;
}
function touch_move_gesture(ev) {
var x, y;
ev.preventDefault();
context.beginPath();
context.fillStyle = colorChosen.innerHTML;
if (ev.touches.length == 1) {
var touch = ev.touches[0];
x = touch.pageX;
y = touch.pageY;
context.arc(x, y, 7, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
}
}
function colorPressed(e) {
var color_button_selected = e.target;
var color_id = color_button_selected.getAttribute('id');
colorChosen.innerHTML = color_id;
}
function resetPressed(e) {
c.width = c.width; // Reset grid
drawScreen();
}
}
Anyone an idea?