☰

Draw Shapes with Color and Line Thickness Options

Draw shapes using HTML5 Canvas with color and line thickness options. Keybinds: c = change color t = change width x = clear all

  1. // ==UserScript==
  2. // @name         Draw Shapes with Color and Line Thickness Options
  3. // @namespace    http://tampermonkey
  4. // @author       TN_Playz
  5. // @version      1.5
  6. // @description  Draw shapes using HTML5 Canvas with color and line thickness options. Keybinds: c = change color t = change width x = clear all
  7. // @match        https://*
  8. // @match        https://*
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Create a canvas element
  17.     const canvas = document.createElement('canvas');
  18.     canvas.width = window.innerWidth;
  19.     canvas.height = window.innerHeight;
  20.     document.body.appendChild(canvas);
  21.  
  22.     // Set up the canvas
  23.     const ctx = canvas.getContext('2d');
  24.     ctx.lineJoin = 'round';
  25.     ctx.lineCap = 'round';
  26.     let color = 'black';
  27.     let thickness = 5;
  28.  
  29.     // Initialize the mouse position
  30.     let mouseX = 0;
  31.     let mouseY = 0;
  32.  
  33.     // Add event listeners to track the mouse position
  34.     canvas.addEventListener('mousemove', (event) => {
  35.         mouseX = event.clientX;
  36.         mouseY = event.clientY;
  37.     });
  38.  
  39.     // Draw a shape at the current mouse position when the mouse button is clicked
  40.     canvas.addEventListener('mousedown', () => {
  41.         ctx.strokeStyle = color;
  42.         ctx.lineWidth = thickness;
  43.         ctx.beginPath();
  44.         ctx.moveTo(mouseX, mouseY);
  45.         canvas.addEventListener('mousemove', onPaint);
  46.     });
  47.  
  48.     // Stop drawing the shape when the mouse button is released
  49.     canvas.addEventListener('mouseup', () => {
  50.         canvas.removeEventListener('mousemove', onPaint);
  51.     });
  52.  
  53.     // Draw a shape as the mouse is moved
  54.     function onPaint() {
  55.         ctx.lineTo(mouseX, mouseY);
  56.         ctx.stroke();
  57.     }
  58.  
  59.     // Change the color when the 'c' key is pressed
  60.     document.addEventListener('keydown', (event) => {
  61.         if (event.key === 'c') {
  62.             color = prompt('Enter a color name or hex code:', color);
  63.         }
  64.     });
  65.  
  66.     // Change the line thickness when the 't' key is pressed
  67.     document.addEventListener('keydown', (event) => {
  68.         if (event.key === 't') {
  69.             thickness = prompt('Enter a line thickness (1-50):', thickness);
  70.         }
  71.     });
  72.  
  73.     // Clear the canvas when the 'x' key is pressed
  74.     document.addEventListener('keydown', (event) => {
  75.         if (event.key === 'x') {
  76.             ctx.clearRect(0, 0, canvas.width, canvas.height);
  77.         }
  78.     });
  79. })();