JSFiddle - React, Tailwind, and code Playground

by farhatdz

HTML

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/main.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery-ui.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-الجزائر- بطاقة إقامة</title>
</head>
<body>
<div id="contatainer">
<div class="inp_res">
     <p><label id="label"></label><input class="btn2 btn3" onclick="dz_res_click()" type="submit" value="اطبع الكتابة"></p>
</div>
<center>
    <div id="d_res" class="btn_download">
        <a id="down_res" download="triangle.jpg"><button class="btn btn1" type="button" onClick="down_res()">Download</button></a>
        <a class="butt" href="http://amigodz-001-site1.gtempurl.com"><button class="btn btn1" type="button" > Go Home</button></a>
    </div>
<canvas id="dz_residence_canvas" width="800" height="600"></canvas> 
</center>
</div>
</body>
</html>

CSS

body {
    background-image: url('../imgs/bg_body.jpg');
    text-align: right;
    font-size: 80%;
    
}
.body{
    margin: 10px auto;
    width: 80%;
    clear: both;
}
a {text-decoration: none;}
a:link, a:visited{color: black}
/*----------------------MAIN HEADER------------------------*/
.mainHeader img {
    width: 100%
}

.mainHeader nav{
    background-color: #40407a;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.mainHeader nav ul{
    text-align: center;
    list-style: none;
    margin: 0 auto;
}

.mainHeader nav ul li{
    display: inline;
}

.mainHeader nav ul li a:link, .mainHeader nav ul li a:visited{
    color: white;
    padding: 10px 10%;
    display: inline-block;
    height: 20px;
    font-size: 16px;
}.mainHeader nav ul li a:hover, .mainHeader nav ul li a:active{
    color: white;
    background-color: #706fd3;
    text-shadow: none;

}
/*----------------------MAIN CONTENT------------------------*/

.top-content {
    background-color: #fff;
    padding: 2%;
    margin-top: 3%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.mainContent {
    width: 69%;
    min-height: 300px;
    float: right;   
}
.document_Opt {
    background-color: #fff;
    padding: 2%;
    margin-top: 3%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;   
}
/*------------------------COUNTENT------------------------*/
select{
    padding:0px 5px;
    width:100%;
    text-align:right;
    border:none;
    direction: rtl;
    border-bottom:1px solid #ccc;
    font-size: 14px;
}
option{
    font-size: 16px;
}

label {
    text-align: right;
    clear: both;
    float:right;
    margin-right:15px;
    margin-left: -5px;
    font-size: 15px;
}

input {
    display:block;
    height: 20px;
    width: 95%;
    border:none;
    border-bottom: 1px solid #ccc;
    margin-right: 5%;
    margin-bottom: 1%;
    float: right;
    text-align:right;
   ...

JavaScript

function dz_res_click() {
    var canvas = document.getElementById("dz_residence_canvas");
    var context = canvas.getContext("2d");
    var residence = new Image();
    residence.src = "https://auto.ferrari.com/fr_FR/wp-content/uploads/sites/13/2013/07/bg-header.jpg"
    residence.onload = function(){
        context.drawImage(residence, 0, 0, 800, 600);
        context.font = "bold 70px sans-serif";
        context.textAlign = "right";
    }
}
 function down_res(){
     var download = document.getElementById("down_res");
     var image = document.getElementById("dz_residence_canvas").toDataURL("image/jpg").replace("image/jpg", "image/octet-stream");
     download.setAttribute("href", image);
	}