JSFiddle - React, Tailwind, and code Playground

by alaa13212

HTML

<input id="text-input" type="text"/>
<br />
<!-- وسم يمكنك من الرسم -->
<canvas id="canvas" width="400" height="160" >متصفحك لا يمكنه الرسم وتحويل الرسوم إلى صور</canvas>

CSS

canvas {
    border: 3px dashed #999;
}

JavaScript

/*
 * (function() { code )();
 * هذه الطريق في الأعلى تسمى التغليف وتستخدم لمنع تعارض أسماء المتغيرات والدوال
 */

(function() {
    function $id(id){
        return document.getElementById(id);
    }
    
    var textInput = $id('text-input'),
        canvas = $id('canvas'),
        cW = canvas.width,
        cH = canvas.height,
        image = $id('image'),
        ctx = canvas.getContext('2d'), // كائن بداخله جميع دوال الرسم
        color = '#ccf', // css color
        font = 'bold 40px Calibri'; // style width size family 
        
        ctx.font = font;
        ctx.fillStyle = color;
        
        // jQuery : $(textInput).on('keyup', function(e){...});
        textInput.addEventListener('keyup', function(e){
            var text = textInput.value;
            ctx.clearRect(0,0,cW,cH); // مسح رقعم الرسم
            ctx.fillText(text, 20, 50); // رسم النص في اﻷحداثيات 20,50
            
        });
        
})();