Topalian JavaScript Graphics Editor by Christopher Andrew Topalian
Topalian JavaScript Graphics Editor by Christopher Andrew Topalian
JavaScript
Graphics
Editor
by
Christopher Andrew Topalian
All Rights Reserved
Copyright 2000-2024
Dedicated
to
God the Father
-
<!-- Dedicated to God the Father -->
<!-- https://github.com/ChristopherTopalian --
>
<!--
https://github.com/ChristopherAndrewTopalia
n -->
<!--
Topalian_JavaScript_Graphics_Editor.html --
>
<script>
function ge(whichId)
{
let result =
document.getElementById(whichId);
return result;
}
function ce(whichType)
{
let result =
document.createElement(whichType);
return result;
}
function ba(whichElement)
{
let result =
document.body.append(whichElement);
return result;
}
function menuBrushOptions()
{
if (ge('mainLineWidthDiv'))
{
ge('mainLineWidthDiv').remove();
}
//-//
//-//
let lineWidthText = ce('span');
lineWidthText.innerHTML = 'Line Width';
lineWidthText.style.fontSize = '15px';
brushOptions.append(lineWidthText);
//-//
brushOptions.append(linebreakUnderLineWi
dthText);
//-//
//-//
//-//
let brushForceTextbox = ce("input");
brushForceTextbox.type = "text";
brushForceTextbox.id =
"brushForceTextbox";
brushForceTextbox.className =
'inputStyle001';
brushForceTextbox.title =
"brushForceTextbox";
brushForceTextbox.placeholder = 'N/A';
brushForceTextbox.onkeyup = function()
{
brushForce = brushForceTextbox.value;
};
brushOptions.append(brushForceTextbox);
//-//
brushOptions.append(ce('br'));
}
function updateLineCap()
{
if (ge('roundCap').checked)
{
ctx.lineCap = 'round';
}
else if (ge('squareCap').checked)
{
ctx.lineCap = 'square';
}
else if (ge('buttCap').checked)
{
ctx.lineCap = 'butt';
}
}
function clearCanvas()
{
ctx.clearRect(0, 0, canvas.width,
canvas.height);
}
function toolboxCreate()
{
let mainDivToolBox = ce('div');
mainDivToolBox.id = 'toolbox';
mainDivToolBox.className =
'mainDivToolBox';
ba(mainDivToolBox);
//-//
// saveButton
let saveButton = ce('button');
saveButton.textContent = 'Save';
saveButton.id = 'saveButton';
saveButton.className = 'toolboxButton';
saveButton.onclick = function()
{
saveDrawing();
};
mainDivToolBox.append(saveButton);
//-//
mainDivToolBox.append(linebreakUnderSave
Button);
//-//
// drawButton
let drawButton = ce('button');
drawButton.textContent = 'Draw';
drawButton.id = 'drawButton';
drawButton.className = 'toolboxButton';
drawButton.onclick = function()
{
selectTool('draw');
};
mainDivToolBox.append(drawButton);
//-//
mainDivToolBox.append(linebreakUnderDraw
Button);
//-//
// eraseButton
let eraseButton = ce('button');
eraseButton.textContent = 'Erase';
eraseButton.id = 'eraseButton';
eraseButton.className = 'toolboxButton';
eraseButton.onclick = function()
{
selectTool('erase');
};
mainDivToolBox.append(eraseButton);
//-//
//-//
//-//
mainDivToolBox.append(ce('hr'));
//-//
mainDivToolBox.append(lineCapContainer);
//-//
//-//
lineCapContainer.append(ce('br'));
//-//
lineCapContainer.append(roundCapCheckbo
x);
//-//
let labelRound = ce('label');
labelRound.id = 'labelRound';
labelRound.textContent = 'Round';
labelRound.className = 'labels';
lineCapContainer.append(labelRound);
//-//
lineCapContainer.append(ce('br'));
//-//
lineCapContainer.append(squareCapCheckb
ox);
//-//
lineCapContainer.append(ce('br'));
//-//
//-//
//-//
lineCapContainer.append(ce('hr'));
//-//
// clear button
let clearButton = ce('button');
clearButton.textContent = 'Clear';
clearButton.className = 'toolboxButton';
clearButton.onclick = function()
{
let choice = confirm('Erase All');
if (choice)
{
clearCanvas();
}
else
{
return;
}
};
mainDivToolBox.append(clearButton);
//-//
mainDivToolBox.append(ce('hr'));
//-//
//-//
let info = ce('div');
info.textContent = 'Topalian JavaScript
Graphics Editor';
info.style.fontSize = 12 + 'px';
mainDivToolBox.append(info);
}
function whenLoaded()
{
toolboxCreate();
menuBrushOptions();
}
</script>
</head>
<canvas id = 'drawingCanvas'></canvas>
<script>
canvas.width = 775;
canvas.height = 450;
let lineWidth = 5;
let lastPos;
canvas.addEventListener('mousedown',
handleMouseDown);
canvas.addEventListener('mouseup',
handleMouseUp);
canvas.addEventListener('mousemove',
handleMouseMove);
function handleImageUpload(event)
{
let file = event.target.files[0];
if (file)
{
let reader = new FileReader();
reader.onload = function(e)
{
let img = new Image();
img.onload = function()
{
let canvas = ge('drawingCanvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.clearRect(0, 0, canvas.width,
canvas.height);
ctx.drawImage(img, 0, 0,
canvas.width, canvas.height);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
}
if (imageInput)
{
imageInput.addEventListener('change',
handleImageUpload);
}
else
{
console.error("Element with id 'imageInput'
not found.");
}
function handleMouseDown(e)
{
if (selectedTool === 'draw')
{
drawing = true;
startDrawing(e);
}
else if (selectedTool === 'erase')
{
erasing = true;
startErasing(e);
}
}
function handleMouseUp()
{
if (drawing)
{
stopDrawing();
}
else if (erasing)
{
erasing = false;
stopErasing();
}
}
function handleMouseMove(e)
{
if (drawing)
{
draw(e);
}
else if (erasing)
{
erasePath(e);
}
}
function startDrawing(e)
{
lastPos = getMousePos(e);
ctx.beginPath();
ctx.moveTo(lastPos.x, lastPos.y);
}
function stopDrawing()
{
drawing = false;
paths.push(ctx.getImageData(0, 0,
canvas.width, canvas.height));
}
function draw(e)
{
if (!drawing)
{
return;
}
ctx.lineTo(currentPos.x, currentPos.y);
ctx.strokeStyle = lineColor;
ctx.lineWidth = lineWidth;
ctx.stroke();
}
function startErasing(e)
{
if (!erasing)
{
return;
}
lastPos = getMousePos(e);
ctx.beginPath();
ctx.moveTo(lastPos.x, lastPos.y);
}
function stopErasing()
{
if (!erasing)
{
return;
}
ctx.closePath();
}
function erasePath(e)
{
if (!erasing)
{
return;
}
function getMousePos(e)
{
let rect = canvas.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
function selectTool(whichTool)
{
selectedTool = whichTool;
drawing = false;
}
function saveDrawing()
{
let dataUrl =
canvas.toDataURL('image/png');
link.href = dataUrl;
link.download = 'drawing.png';
link.click();
}
</script>
</body>
</html>
/* Dedicated to God the Father */
/* https://github.com/ChristopherTopalian */
/*
https://github.com/ChristopherAndrewTopalia
n */
/* style001.css */
body
{
background-color: rgb(80, 80, 80);
color: rgb(255, 255, 255);
text-shadow: 2px 2px 4px rgb(0, 0, 0);
}
canvas
{
border-style: solid;
border-width: 1px;
border-color: rgb(0, 0, 0);
}
a
{
text-decoration: none;
color: rgb(0, 255, 255);
}
#drawingCanvas
{
position: absolute;
left: 110px;
top: 5px;
}
#toolbox
{
position: fixed;
left: 0px;
top: 0px;
width:70px;
height: 400px;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: rgb(255, 255, 255);
border-radius: 8px;
overflow-y: scroll;
scrollbar-width: thin;
}
.toolboxButton
{
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 2px;
border-style: solid;
border-width: 1px;
border-radius: 8px;
border-color: rgb(255, 255, 255);
background-color: rgb(20, 20, 20);
font-size: 15px;
color: rgb(255, 255, 255);
line-height: 17px;
}
.toolboxButton:hover
{
border-color: aqua;
}
.toolboxButton:active
{
color: aqua;
}
.labels
{
font-size: 13px;
}
.inputStyle001
{
width: 70px;
padding-left: 10px;
padding-right: 10px;
border-radius: 8px;
background-color: rgb(0, 0, 0);
font-size: 15px;
color: rgb(255, 255, 255);
}
.imageInput
{
position: fixed;
right: 0px;
top: 0px;
width: 100px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
padding-bottom: 1px;
margin-bottom: 1px;
border-style: solid;
border-width: 1px;
border-radius: 8px;
border-color: rgb(255, 255, 255);
background-color: rgb(20, 20, 20);
font-size: 15px;
color: rgb(255, 255, 255);
line-height: 15px;
z-index: 100;
}
True Artificial Intelligence System
16-Gon
Tautology
MI 1111 CI
1101 1011
AND XNOR
0001 1001
LP RP
0011 0101
OR NOR
0111 1000
RC LC
1010 1100
XOR NAND
0110 1110
CNI MNI
Contra-
0100 0010
-diction
0000
For More Tutorials:
CollegeOfScripting.weebly.com
CollegeOfScripting.wordpress.com
Youtube.com/ScriptingCollege
Twitter.com/CollegeOfScript
GitHub.com/ChristopherTopalian
GitHub.com/ChristopherAndrewTopalian
Sites.google.com/view/CollegeOfScripting
Dedicated to God the Father
This book is created by the
College of Scripting Music & Science.
Always remember, that each time you write a script
with a pencil and paper, it becomes imprinted so
deeply in memory that the material and methods are
learned extremely well.
When you Type the scripts, the same is true. The
more you type and write out the scripts by keyboard
or pencil and paper, the more you will learn
programming!
Write and Type every example that you find.
Keep all of your scripts organized.
Every script that you create increases your
programming abilities.
SEEING CODE, is one thing,
but WRITING CODE is another.
Write it, Type it, Speak It, See It, Dream It.
CollegeOfScripting.weebly.com