Bootstrap Snippet canvas plugin custom using HTML CSS Javascript

1
2
3
4
5
6
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="funnel1" ></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
*{box-sizing: border-box;}
    body{background: #efefef;}
    #funnel1{width: 800px; max-width: 100%;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var funnel1Area = document.getElementById("funnel1");
    
    var ContainerWidth = funnel1Area.offsetWidth;
    var funnel1 = document.createElement("CANVAS");
        funnel1.width = ContainerWidth;
        funnel1.height = funnel1.width * 4 / 5;
        var funnel1Width = funnel1.width;
        var funnel1Height = funnel1.height;
        // console.log(funnel1Width);
        var part = funnel1Width/2 - 7;
        var part2Offset = funnel1Width/2 + 7;
        var ctx = funnel1.getContext("2d");
        
        
        function checkParams(){
            funnel1.width = ContainerWidth;
            funnel1.height = funnel1.width * 4 / 5;
            funnel1Width = funnel1.width;
            funnel1Height = funnel1.height;
            part = funnel1Width/2 - 7;
            part2Offset = funnel1Width/2 + 7;
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"canvas plugin custom"
Bootstrap 4.1.1 Snippet by mdburhani52

Related: See More

Questions / Comments:

"canvas plugin custom" Bootstrap 4.1.1 Snippet by mdburhani52

Related: See More

Questions / Comments:

"canvas plugin custom"
Bootstrap 4.1.1 Snippet by mdburhani52