JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Abstände mit border</title>
    </head>
    
    <body>
        <section id="config-wrapper">
            offset_x: <input type="text" name="offset_x" /> // offset_y: 400 // width: 0.009
            
        </section>
        <section id="canvas-wrapper">
            <canvas id="surface">(Your browser doesn't support canvas)</canvas>
        </section>        
    </body>
</html>

CSS

* {
    margin: 0 ;
    padding: 0 ;
    border: 0 none ;
}

html, body {
    width: 100% ;
    height: 100% ;
}

body > #config-wrapper {
    position: absolute ;
    padding-top: 10px ;
    padding-left: 10px ;
    top: 0 ;
    right: 50px ;
    left: 50px ;
    height: 50px ;
    background-color: lightblue ;
    font-family: "Agency FB" ;
    font-size: 1.3em ;
}

body > #config-wrapper > input {
    font-family: inherit ;
    background-color: lightblue ;
}

body > #canvas-wrapper {
    position: absolute ;
    top: 50px ;
    right: 50px ;
    bottom: 50px ;
    left: 50px ;
    overflow: hidden ;
    background-color: #EAEAEA ;
}

body > #canvas-wrapper > #surface {
    position: absolute ;
    top: 50px ;
    left: 50px ;
}

body > canvas

body > a {
    font-family: "Agency FB" ;
    font-size: 2em ;
    color: black ;
    text-decoration: none ;
}

body > a:active {
    color: red ;
}

JavaScript

$(document).ready( function( ) {
    // Zeichenkontext ermitteln
    //
    var canvas = document.getElementById( "surface" ) ;
    var context = canvas.getContext( "2d" ) ;
    
    canvas.width  = 1500 ;
    canvas.height = 800 ;
    
    // Farbe setzen
    //
    context.fillStyle = "lightblue" ;

    // Werte für die Berechnung initialisieren
    //
    var x1 = -500, x2 = 500 ;  // x-Bereich
    var step = 0.1 ;           // Genauigkeit
    var pxw = 3 ;              // Punktstärke
    var w = 0.009 ;            // Breitenverlauf
    var offset_x = 320 ;       // Verschiebung x-Achse
    var offset_y = 0 ;         // Verschiebung y-Achse
    
    var x = 0 ;                // x-Koordinate
    var y = 0 ;                // y-Koordinate
    
    // Parabel zeichnen
    //
    for( x=x1; x<=x2; x+=step ) {
        y = (w * Math.pow( x, 2 )) + offset_y
        context.fillRect( x + offset_x, y, pxw, pxw ) ;
    }
} ) ;